/* =========================================================
   HERO WASH — LEGACY ALIASES (BACKWARD COMPATIBILITY)
   ========================================================= */

#blog-hero.wash-default {
  background-color: rgba(0,0,0,0.65);
  background-blend-mode: multiply;
}

#blog-hero.wash-heavy {
  background-color: rgba(0,0,0,0.85);
  background-blend-mode: multiply;
}

#blog-hero.wash-light {
  background-color: rgba(0,0,0,0.45);
  background-blend-mode: multiply;
}
/* =========================================================
   HERO SYSTEM — FINAL
   Quark / Quark Open Publishing
   ---------------------------------------------------------
   Replaces all earlier hero experiments (hero-tall,
   hero-natural, ad-hoc overlays).
   ---------------------------------------------------------
   Responsibilities:
   - Control hero image visual weight (wash)
   - Support darken + lighten directions
   - Allow per-page selection via classes
   - Preserve image fidelity
   ========================================================= */


/* =========================================================
   HERO WASH — DARKEN
   ========================================================= */

#blog-hero.wash-dark-default {
  background-color: rgba(0,0,0,0.65);
  background-blend-mode: multiply;
}

#blog-hero.wash-dark-heavy {
  background-color: rgba(0,0,0,0.85);
  background-blend-mode: multiply;
}

#blog-hero.wash-dark-light {
  background-color: rgba(0,0,0,0.45);
  background-blend-mode: multiply;
}
/* =========================================================
   HERO WASH — LIGHTEN
   ========================================================= */

#blog-hero.wash-lighten-light {
  background-color: rgba(255,255,255,0.35);
  background-blend-mode: screen;
}

#blog-hero.wash-lighten-default {
  background-color: rgba(255,255,255,0.55);
  background-blend-mode: screen;
}

#blog-hero.wash-lighten-heavy {
  background-color: rgba(255,255,255,0.70);
  background-blend-mode: screen;
}

/* Optional warm paper-toned lift */
#blog-hero.wash-lighten-warm {
  background-color: rgba(245,238,220,0.55);
  background-blend-mode: screen;
}
/* =========================================================
   HERO BACKGROUND MODE — EXPLICIT TOGGLES
   ========================================================= */

/* Explicit editorial hero */
#blog-hero.hero-cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#blog-hero.hero-repeat {
  background-repeat: repeat;
  background-size: 320px auto; /* FIXED TILE WIDTH */
  background-position: top left;
}
/* Explicit print / pattern hero 
#blog-hero.hero-repeat {
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}
*/

/* =========================================================
   HERO MOBILE NORMALIZATION (CRITICAL)
   ---------------------------------------------------------
   Purpose:
   - Ensure SAME-SIZED hero images render consistently on mobile
   - Show MORE of the full image (no accidental zoom)
   - Prevent implicit cover-based cropping
   ---------------------------------------------------------
   This matches the "GOOD" reference screenshot you provided.
   ========================================================= */

@media (max-width: 767px) {

  /* DEFAULT MOBILE BEHAVIOR
     -------------------------------------------------------
     If the hero is NOT explicitly repeating,
     we show the ENTIRE image on mobile.
     ------------------------------------------------------- */
  #blog-hero:not(.hero-repeat) {
    background-size: contain;     /* show full image */
    background-repeat: no-repeat;
    background-position: center;
  }

  /* OPTIONAL: MOBILE ZOOM (OPT-IN ONLY)
     -------------------------------------------------------
     Use ONLY when you WANT intentional cropping.
     ------------------------------------------------------- */
  #blog-hero.hero-mobile-zoom {
    background-size: 130%;
  }
}

/* =========================================================
   HERO FOCAL CONTROL (OPT-IN)
   ========================================================= */

body.hero-focus.header-fixed .hero {
  position: relative;
  background-position: center 50% !important;
  min-height: 420px;
  max-height: 560px;
  padding-top: 5rem;
  padding-bottom: 6rem;
}
/* =========================================================
   HERO ZOOM (OPT-IN ONLY)
   ========================================================= */

#blog-hero.hero-zoom {
  background-position: center center;
  background-size: 98%;
  transition: background-size 0.8s ease;
}

#blog-hero.hero-zoom:hover {
  background-size: 108%;
}

@media (hover: none) {
  #blog-hero.hero-zoom:hover {
    background-size: 100%;
  }
}
/* =========================================================
   BLOG INDEX SAFETY (NO HERO STYLING)
   ========================================================= */

.blog #blog-hero {
  background: none !important;
  background-blend-mode: normal !important;
  transition: none !important;
}

.blog #blog-hero .image-overlay,
.blog #blog-hero #to-start {
  display: none !important;
}
/* =========================================================
   HERO TEXT CONTRAST HELPERS (OPT-IN)
   ---------------------------------------------------------
   Used when hero images are lightened and text needs weight
   ========================================================= */

#blog-hero.text-contrast-light {
  color: rgba(0, 0, 0, 0.85);
}

#blog-hero.text-contrast-dark {
  color: rgba(255, 255, 255, 0.95);
}
/* =========================================================
   HERO TEXT BACKING — EDITORIAL STRIP (OPT-IN)
   ========================================================= */

#blog-hero.text-strip h1,
#blog-hero.text-strip p {
  --strip-opacity: 0.70; /* ← MAIN CONTROL KNOB (0.35–0.7 is sane) */

  background-color: rgba(245, 238, 220, var(--strip-opacity));
  padding: 0.15em 0.4em;
  display: inline;
  box-decoration-break: clone;
}

/* =========================================================
   HERO SUPPORTING TEXT — STRUCTURAL EMPHASIS
   ========================================================= */

#blog-hero.hero-focus p {
  font-weight: 400;          /* up from regular */
  letter-spacing: 0.015em;  /* subtle authority */
  opacity: 0.92;            /* keeps it present */
}

/* =========================================================
   HERO → CONTENT SEPARATOR
   ========================================================= */

#blog-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ======================================================
   FUTURE 2021 — GREEN CRT CODE BLOCKS (PrismJS)
   ====================================================== */

div.code-toolbar > pre[class*="language-"] {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0.30) 2px,
      rgba(0,0,0,0.30) 6px
    ),
    #020b02 !important;

  color: #39ff14 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 0.65rem;
  line-height: 1.35;
  border-radius: 6px;
  padding: 1.25rem !important;

  box-shadow:
    inset 0 0 18px rgba(57,255,20,0.18),
    0 0 10px rgba(57,255,20,0.12);

  filter: brightness(1.03) contrast(1.02);
}

div.code-toolbar > pre[class*="language-"] > code {
  background: transparent !important;
  color: #39ff14 !important;
}

div.code-toolbar .token {
  color: #39ff14 !important;
}

div.code-toolbar .token.comment,
div.code-toolbar .token.prolog,
div.code-toolbar .token.doctype,
div.code-toolbar .token.cdata {
  color: #2aa82a !important;
}

div.code-toolbar .token.keyword,
div.code-toolbar .token.function,
div.code-toolbar .token.class-name {
  color: #9dff9d !important;
}

div.code-toolbar .token.number,
div.code-toolbar .token.boolean,
div.code-toolbar .token.constant,
div.code-toolbar .token.property,
div.code-toolbar .token.symbol,
div.code-toolbar .token.url {
  color: #66ff66 !important;
}

div.code-toolbar > pre[class*="language-"]::before {
  content: "ROBCO INDUSTRIES (TM) UNIFIED OPERATING SYSTEM";
  display: block;
  color: #66ff66;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

@keyframes fallout-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

div.code-toolbar > pre[class*="language-"] > code::after {
  content: "_";
  margin-left: 0.25rem;
  animation: fallout-blink 1s steps(1) infinite;
  color: #39ff14;
}

div.code-toolbar > .toolbar {
  opacity: 1 !important;
  pointer-events: auto;
  top: 0.5rem;
  right: 0.5rem;
}

div.code-toolbar > .toolbar .toolbar-item button {
  background: transparent !important;
  border: 1px solid rgba(57,255,20,0.6) !important;
  color: transparent !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border-radius: 3px;
}

div.code-toolbar > .toolbar .toolbar-item button::before {
  content: "COPY";
  color: #39ff14;
}

div.code-toolbar > .toolbar .toolbar-item button:hover {
  background: rgba(57,255,20,0.15) !important;
  box-shadow: 0 0 6px rgba(57,255,20,0.6) !important;
}

:not(pre) > code {
  background: #f3f3f3;
  color: inherit;
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

/* ======================================================
   FUTURE 2021 — AMBER CRT OVERRIDE
   Enable with: body_classes: terminal-amber
   ====================================================== */

body.terminal-amber div.code-toolbar > pre[class*="language-"] {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0.30) 2px,
      rgba(0,0,0,0.30) 6px
    ),
    #0b0702 !important;

  color: #ffb347 !important;

  box-shadow:
    inset 0 0 18px rgba(255,180,80,0.22),
    0 0 10px rgba(255,160,60,0.14) !important;
}

body.terminal-amber div.code-toolbar > pre[class*="language-"] > code {
  color: #ffb347 !important;
}

body.terminal-amber div.code-toolbar .token {
  color: #ffb347 !important;
}

body.terminal-amber div.code-toolbar .token.comment,
body.terminal-amber div.code-toolbar .token.prolog,
body.terminal-amber div.code-toolbar .token.doctype,
body.terminal-amber div.code-toolbar .token.cdata {
  color: #cfa45a !important;
}

body.terminal-amber div.code-toolbar .token.keyword,
body.terminal-amber div.code-toolbar .token.function,
body.terminal-amber div.code-toolbar .token.class-name {
  color: #ffd27d !important;
}

body.terminal-amber div.code-toolbar .token.number,
body.terminal-amber div.code-toolbar .token.boolean,
body.terminal-amber div.code-toolbar .token.constant,
body.terminal-amber div.code-toolbar .token.property,
body.terminal-amber div.code-toolbar .token.symbol,
body.terminal-amber div.code-toolbar .token.url {
  color: #ffcc80 !important;
}

body.terminal-amber div.code-toolbar > pre[class*="language-"]::before {
  color: #ffd27d !important;
}

body.terminal-amber div.code-toolbar > pre[class*="language-"] > code::after {
  color: #ffb347 !important;
}

body.terminal-amber div.code-toolbar > .toolbar .toolbar-item button {
  border-color: rgba(255,180,80,0.7) !important;
}

body.terminal-amber div.code-toolbar > .toolbar .toolbar-item button::before {
  color: #ffb347 !important;
}

body.terminal-amber div.code-toolbar > .toolbar .toolbar-item button:hover {
  background: rgba(255,180,80,0.18) !important;
  box-shadow: 0 0 6px rgba(255,160,60,0.6) !important;
}
/* ======================================================
   FUTURE 2021 — TYPOGRAPHY SYSTEM
   ====================================================== */

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
}

/* Body text */
body {
  font-family: var(--font-body);
  font-size: 16px;          /* slightly smaller, editorial */
  line-height: 1.65;        /* Future-style readability */
  color: #2a2a2a;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;         /* Future uses medium-bold */
  letter-spacing: -0.01em;
  color: #1f1f1f;
}

/* Heading scale (Future-like) */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

/* Paragraph rhythm */
p {
  margin-bottom: 1.4em;
}
/* FORCE visual separation so background can appear 
#body-wrapper > .container {
  padding: 3rem !important;
}*/

/* Now the canvas will be visible 
#body-wrapper {
  background: #f5f4f1 !important;
}*/
/* Outer paper */
html,
body,
#page-wrapper {
  background-color: #f7f3e8;
}

/* Create paper margin inside reading area */
#body-wrapper > .container.grid-lg {
  padding: 3rem;
}

/* Keep content white */
#body-wrapper .card,
#body-wrapper .sidebar-content {
  background-color: #ffffff;
}
/* ======================================================
   PAPER CANVAS — FINAL, CONSISTENT LAYER
   ====================================================== */

/* Outer paper */
html,
body,
#page-wrapper {
  background-color: #ede5d4;
}

/* Create the ONLY paper margin that matters */
#body-wrapper > .container.grid-lg {
  padding: 3rem;
  background: transparent;
}

/* Reading surfaces stay white */
#body-wrapper .card,
#body-wrapper .sidebar-content {
  background-color: #f6f1e6;
}
/* Sidebar inherits paper instead of card white */
#sidebar .sidebar-content {
  background-color: transparent;
}
/* Footer: force paper (bg-gray uses background shorthand) */
#footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
#footer.section.bg-gray {
  background: transparent !important;
  background-color: transparent !important;
}

#footer.section.bg-gray > section.container.grid-lg {
  background: transparent !important;
  background-color: transparent !important;
}
/* ======================================================
   HEADER — SOLID COLOR (NO TRANSPARENCY)
   ====================================================== */

/* Force solid header background */
#header {
  background-color: #65524b !important; /* CHANGE THIS */
}

/* Header text & links */
#header,
#header a {
  color: #f8f6f2 !important;
}

/* Navigation hover / active */
#header a:hover,
#header a.active {
  color: # !important;
}

/* Mobile hamburger icon */
#toggle span {
  background-color: #f8f6f2 !important;
}
#header .navbar-brand img {
  background: rgba(247, 243, 232, 0.9);
  padding: 1px 3px;
  border-radius: 6px;
  outline: 1px solid rgba(186, 3, 3, 0.15);
}
/* ----------------------------------------
   Navigation flyout – FORCE header color
----------------------------------------- */

/* Mobile overlay menu */
nav.overlay-menu {
  background-color: #65524b !important;
}

/* Desktop dropdown 
.dropmenu,
.dropmenu ul {
  background-color: #b20404 !important;
}
*/
/* Flyout links readable */
nav.overlay-menu a,
.dropmenu a {
  color: #fff !important;
}
/* ----------------------------------------
   Mobile flyout logo – match header
----------------------------------------- */

.mobile-logo {
  background-color: #65524b !important; /* same as header */
}

/* Optional: ensure logo spacing looks clean */
.mobile-logo .navbar-brand {
  display: block;
}
/* ----------------------------------------
   Footer text styling
----------------------------------------- */
#footer .vv-footer-text {
    font-weight: 400;                 /* bold */
    color: #4a2e1f;                   /* dark brown */
}

/* Flip rocket to face left 
#footer .emoji-flip {
    display: inline-block;
    transform: scaleX(-1);
}*/
/* ---------------------------------------------
   Center all images rendered in content
   ---------------------------------------------
   - Forces images to behave as block elements
   - Uses auto margins to center horizontally
   - Works for Markdown-rendered images
   - Does NOT fix broken image paths
---------------------------------------------- */

img {
  display: block;          /* Makes the image a block-level element */
  margin-left: auto;       /* Centers image horizontally */
  margin-right: auto;      /* Centers image horizontally */
}
/* ---------------------------------------------
   Blog post links – VirtualVelocity green
   ---------------------------------------------
   - Applies only to links inside blog content
   - Does not affect navigation or footer links
   - Matches VirtualVelocity brand color
---------------------------------------------- */

/* Default blog link color */
.blog-content a,
.blog-listing a {
  color: #338258;          /* VirtualVelocity green (adjust if needed) */
  text-decoration: none;  /* Clean, modern look */
}

/* Hover state */
.blog-content a:hover,
.blog-listing a:hover {
  color: #2f8a56;          /* Slightly darker green on hover */
  text-decoration: underline;
}

/* ---------------------------------------------
   Blog Previous / Next button – custom styling
   ---------------------------------------------
   - Removes Spectre border
   - Uses outline for consistent border control
   - Allows full background color control
---------------------------------------------- */

.prev-next .btn {
  border: none !important;              /* Kill Spectre blue border */
  outline: 1px solid #8b6b4f;            /* Brown outline */
  outline-offset: 0;

  background-color: #ede5d4;            /* DEFAULT background */
  color: #338258;                        /* VirtualVelocity green text */

  transition: background-color 0.15s ease,
              color 0.15s ease,
              outline-color 0.15s ease;
}

/* Hover state */
.prev-next .btn:hover {
  background-color: #3fa66b;             /* Green fill on hover */
  color: #ffffff;
}

/* Active / pressed state */
.prev-next .btn:active {
  background-color: #2f8a56;             /* Darker green */
}

/* Keyboard focus (optional but recommended) */
.prev-next .btn:focus-visible {
  outline-color: #6f523b;                /* Slightly darker brown */
}
/* Featherlight full chrome color (Quark) */
.featherlight .featherlight-content {
  background: #6b4a2d !important;  /* nav brown */
  padding: 10px !important;
}

/* Remove any default white from inner wrappers */
.featherlight .featherlight-inner {
  background: transparent !important;
}

/* Keep image clean, no extra borders */
.featherlight .featherlight-image {
  display: block;
  background: transparent !important;
  border: none !important;
}
.featherlight .featherlight-image {
  box-shadow: 0 0 0 2px #000;
}
/* Featherlight close button background */
.featherlight-close-icon {
  background: #1f7a3a !important;  /* your site green */
}
.featherlight-close-icon {
  background: #1f7a3a !important;
  color: #fff !important;
  border-radius: 2px;
}
.featherlight-close-icon:hover {
  background: #2fa85a !important;
}
/* ================================
   Quark Notices — Inline, Flat, Final
   ================================ */

/* Hard reset of Quark notice visuals */
.notices,
.notices.note,
.notices.tip,
.notices.success,
.notices.warning {
  background-image: none !important;
  box-shadow: none !important;
  border-left: none !important;
}

/* Kill all Quark pseudo-elements */
.notices::after,
.notices.note::after,
.notices.tip::after,
.notices.success::after,
.notices.warning::after {
  content: none !important;
  display: none !important;
}

/* Base notice container — FLAT box */
.notices {
  position: relative;

  background-color: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;

  padding: 1.1rem 1.25rem 1.1rem 2rem !important;
  margin: 2rem 0;
}

/* Explicit left bar (the ONLY accent) */
.notices::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 8px;
  height: 100%;

  background-color: #8a6d5c;

  /* Rounded only on the left */
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* Title + link */
.notices .notices-title,
.notices .notices-title a {
  color: #4a3f35 !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  opacity: 0.95;
}

/* Body text */
.notices p {
  color: #3f3f3f;
}

.notices p:last-child {
  margin-bottom: 0;
}

/* Per-type bar colors (ONLY the bar changes) */
.notices.tip::before {
  background-color: #5f8f82;
}

.notices.success::before {
  background-color: #6f9f7a;
}

.notices.warning::before {
  background-color: #b38b5d;
}
/* ================================
   Monitor Frame (Final, Correct)
   ================================ */

.monitor-frame {
  position: relative;
  width: 640px;
  max-width: 100%;
  margin: 2rem auto;
}

/* Bezel */
.monitor-frame img.monitor-bezel {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* Screen viewport */
.monitor-screen {
  position: absolute;
  top: 24%;
  left: 17%;
  width: 66%;
  height: 50%;

  border-radius: 34px;
  overflow: hidden;

  /* THIS is the important part */
  background-size: contain;     /* fits inside */
  background-repeat: no-repeat;
  background-position: center;

  z-index: 1;
}
/* Header always on top */
#header {
  z-index: 1000;
}

/* Offset content for fixed header (Quark-specific) */
body.header-fixed .content-wrapper {
  padding-top: 4.5rem;
}

/* Keep components below header */
.monitor-frame {
  position: relative;
  z-index: 1;
}


/* ======================================================
   SAFE VISUAL ENHANCEMENTS (MERGED)
   These do NOT affect header or mobile navigation
   ====================================================== */

/* Paper canvas background */
html,
body,
#page-wrapper {
  background-color: #ede5d4;
}

/* Reading surfaces */
#body-wrapper .card,
#body-wrapper .sidebar-content {
  background-color: #f6f1e6;
}

/* Blog links */
.blog-content a,
.blog-listing a {
  color: #338258;
  text-decoration: none;
}
.blog-content a:hover,
.blog-listing a:hover {
  color: #2f8a56;
  text-decoration: underline;
}

/* Notices styling */
.notices {
  background-image: none !important;
  box-shadow: none !important;
  border-left: none !important;
  position: relative;
  background-color: rgba(255,255,255,0.06) !important;
  padding: 1.1rem 1.25rem 1.1rem 2rem !important;
  margin: 2rem 0;
}
.notices::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background-color: #8a6d5c;
}

/* Monitor / TV overlay untouched */
.monitor-frame {
  position: relative;
  width: 640px;
  max-width: 100%;
  margin: 2rem auto;
}
.monitor-screen {
  position: absolute;
  top: 24%;
  left: 17%;
  width: 66%;
  height: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ======================================================
   FINAL FIX — Prism toolbar must stay BELOW header
   ====================================================== */

/* Header always wins */
#header {
  position: relative;
  z-index: 10000;
}

/* Prism toolbar forced below header */
.code-toolbar {
  position: relative;
  z-index: 1 !important;
}

.code-toolbar > .toolbar {
  position: absolute;
  z-index: 1 !important;
}
.site-footer-contact {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 0.5rem;
}

.site-footer-contact img {
  width: 18px;
  height: 18px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.site-footer-contact a:hover img {
  opacity: 1;
}
.site-footer-contact img {
  height: 18px;
  width: auto;
  display: block;
}
/* ================================
   FOOTER SPACING – REAL FIX
   ================================ */

/* Footer outer container */
#footer.section.bg-gray {
  padding-top: 1.1rem !important;
  padding-bottom: 1.8rem !important; /* fixes tight bottom */
}

/* Inner footer content */
#footer.section.bg-gray > section.container.grid-lg {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Copyright line */
#footer .vv-footer-text,
#footer p {
  margin-bottom: 0.4rem !important; /* pull icons closer */
}

/* Icon row */
#footer .site-footer-contact {
  margin-top: 0.2rem !important;
}
img[src*="vv-logo-real-small.png"] {
  max-width: 40px;
  display: block;
  margin: 0 auto;
}
/* =========================================================
   CONTACT PAGE ICON TWEAK
   ========================================================= */

.contact-page {
  display: flex;
  align-items: center;
  gap: 16px;            /* space between icons */
}

.contact-page img {
  height: 56px;         /* 👈 icon size control */
  width: auto;
  display: inline-block;
}
/* =========================================================
   CONTACT PAGE — CENTER BLOCK
   ========================================================= */

.contact-page {
  display: flex;
  align-items: center;
  justify-content: center;  /* 👈 centers icons horizontally */
  gap: 16px;
}
/* ======================================================
   Blog content: tighten technical writing rhythm 
   ====================================================== */

.e-content p {
  margin-bottom: 0.65rem;
}

.e-content ul,
.e-content ol {
  margin-top: 0.2rem;
  margin-bottom: 0.7rem;
}

.e-content li {
  margin-bottom: 0.25rem;
}