/* =========================================================
   VERIXO — Custom stylesheet (clean version)
   File: wp-content/plugins/verixo-custom-styles/assets/css/verixo.css

   CONTENTS
   1. Design tokens (change brand colour here)
   2. Global
   3. Header and navigation
   4. Hero
   5. Shared section styles
   6. Services
   7. Projects
   8. Process
   9. Insights and post list
   10. Call to action
   11. Footer
   12. Blog index, archives and single posts
   13. Mobile spacing
   14. Reduced motion
   ========================================================= */

/* ---------------------------------------------------------
   1. Design tokens
   To change the brand colour, edit the accent lines below.
   --vx-accent-rgb must match --vx-accent. The two -text colours
   are lighter shades used for text, so it stays readable on dark.
   --------------------------------------------------------- */
:root {
  --vx-accent: #0C6AC1;            /* brand blue: fills, borders, glows */
  --vx-accent-hover: #0A5CAD;      /* darker blue: hover on filled buttons */
  --vx-accent-rgb: 12, 106, 193;   /* must match --vx-accent */
  --vx-accent-text: #4A9BEA;       /* lighter blue for TEXT on dark backgrounds */
  --vx-accent-text-hover: #8CC0F5;

  --vx-bg: #101010;
  --vx-section: #141414;
  --vx-card: #1C1C1C;
  --vx-card-hover: #22201F;
  --vx-surface: #191919;
  --vx-white: #F5F3EF;
  --vx-muted: #BDBDBD;
  --vx-border: rgba(255, 255, 255, 0.14);

  /* Fonts: Sora for headings, Inter for everything else.
     The fallbacks keep the layout stable while fonts load. */
  --vx-font-heading: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Heading weights: lower these numbers for lighter headings.
     (Load the same weights in Customize > Typography > Font Manager.) */
  --vx-weight-heading: 600;
  --vx-weight-sub: 500;

  --vx-pad-y: clamp(48px, 6vw, 72px);
  --vx-gap-cards: clamp(28px, 3vw, 36px);
}

/* ---------------------------------------------------------
   2. Global
   --------------------------------------------------------- */
body,
.site,
.site-content,
.content-area {
  background: var(--vx-bg);
  color: var(--vx-muted);
}

body,
button,
input,
select,
textarea {
  font-family: var(--vx-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
  font-family: var(--vx-font-heading);
  color: var(--vx-white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1, h2 {
  font-weight: var(--vx-weight-heading);
}

h3, h4, h5, h6 {
  font-weight: var(--vx-weight-sub);
}

/* ---------------------------------------------------------
   3. Header and navigation
   --------------------------------------------------------- */
.site-header {
  background: var(--vx-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.inside-header {
  max-width: 1240px;
  margin-inline: auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-logo img,
.site-branding img {
  max-width: 180px;
  height: auto;
}

.main-navigation,
.main-navigation ul ul {
  background: var(--vx-bg);
}

/* Extra specificity so GeneratePress Customizer colours don't win */
.site-header .main-navigation .main-nav ul li a {
  color: #D6D6D6;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 15px;
  transition: color 180ms ease;
}

.site-header .main-navigation .main-nav ul li:hover > a,
.site-header .main-navigation .main-nav ul li a:hover,
.site-header .main-navigation .main-nav ul li.current-menu-item > a,
.site-header .main-navigation .main-nav ul li.current_page_item > a {
  color: var(--vx-accent-text);
  background: transparent;
}

.site-header .main-navigation .main-nav ul li a:focus-visible {
  outline: 2px solid var(--vx-accent-text);
  outline-offset: 3px;
}

.main-navigation .menu-toggle {
  background: var(--vx-surface);
  color: var(--vx-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

.main-navigation .menu-toggle:hover {
  background: #242424;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .inside-header {
    padding: 12px 20px;
    gap: 16px;
  }

  .site-logo img,
  .site-branding img {
    max-width: 145px;
  }

  .site-header .main-navigation .main-nav ul li a {
    padding: 12px 20px;
  }
}

/* ---------------------------------------------------------
   4. Hero
   --------------------------------------------------------- */
.vx-hero {
  box-sizing: border-box;
  padding-block: clamp(56px, 7vw, 96px);
  padding-inline: 28px;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(var(--vx-accent-rgb), 0.16), transparent 42%),
    var(--vx-bg);
  border-bottom: 1px solid var(--vx-border);
}

.vx-hero h1 {
  max-width: 950px;
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--vx-white);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: var(--vx-weight-heading);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.vx-hero p {
  max-width: 680px;
  margin-bottom: 30px;
  color: #A5A5A5;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.8;
}

.vx-hero .vx-eyebrow {
  margin-bottom: 24px;
}

.vx-hero .wp-block-buttons {
  margin-top: 28px;
}

@media (max-width: 768px) {
  .vx-hero {
    padding-inline: 22px;
  }

  .vx-hero h1 {
    font-size: clamp(38px, 10vw, 56px);
  }

  .vx-hero .wp-block-buttons {
    align-items: stretch;
    gap: 12px;
  }

  .vx-hero .wp-block-button .wp-block-button__link {
    padding: 13px 18px;
  }
}

/* ---------------------------------------------------------
   Buttons (hero and call to action share these)
   Solid by default; set a button's block style to "Outline"
   for the secondary look.
   --------------------------------------------------------- */
.vx-hero .wp-block-buttons,
.vx-cta .wp-block-buttons {
  gap: 14px;
}

.vx-hero .wp-block-button .wp-block-button__link,
.vx-cta .wp-block-button .wp-block-button__link {
  padding: 15px 24px;
  border: 1px solid var(--vx-accent) !important;
  border-radius: 6px;
  background: var(--vx-accent) !important;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease,
              border-color 180ms ease,
              color 180ms ease,
              transform 180ms ease;
}

.vx-hero .wp-block-button .wp-block-button__link:hover,
.vx-cta .wp-block-button .wp-block-button__link:hover {
  background: var(--vx-accent-hover) !important;
  border-color: var(--vx-accent-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.vx-hero .wp-block-button.is-style-outline .wp-block-button__link,
.vx-cta .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: var(--vx-white) !important;
}

.vx-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.vx-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: transparent !important;
  border-color: var(--vx-accent) !important;
  color: var(--vx-accent-text) !important;
}

.vx-hero a:focus-visible,
.vx-cta a:focus-visible {
  outline: 2px solid var(--vx-accent-text);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   5. Shared section styles
   Services, Projects, Process and Insights
   --------------------------------------------------------- */
.vx-services,
.vx-projects,
.vx-process,
.vx-insights {
  box-sizing: border-box;
  padding-block: var(--vx-pad-y);
  /* Centres the content at 1180px without an inner wrapper */
  padding-inline: max(28px, calc((100% - 1180px) / 2));
  text-align: left;
}

.vx-services,
.vx-process {
  background: var(--vx-section);
}

.vx-projects,
.vx-insights {
  background: var(--vx-bg);
}

.vx-projects,
.vx-process,
.vx-insights {
  border-top: 1px solid var(--vx-border);
}

/* Keep every child left-aligned, even if the Group layout is Constrained */
.vx-services > *,
.vx-projects > *,
.vx-process > *,
.vx-insights > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}

/* Eyebrow labels (hero included) */
.vx-hero .vx-eyebrow,
.vx-services .vx-eyebrow,
.vx-projects .vx-eyebrow,
.vx-process .vx-eyebrow,
.vx-insights .vx-eyebrow {
  max-width: none;
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--vx-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vx-hero .vx-eyebrow {
  margin-bottom: 24px;
}

/* Section headings */
.vx-services h2,
.vx-projects h2,
.vx-process h2,
.vx-insights h2 {
  max-width: 760px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #FFFFFF;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--vx-weight-heading);
  line-height: 1.15;
  letter-spacing: -1px;
}

/* Intro paragraphs */
.vx-services > p:not(.vx-eyebrow),
.vx-projects > p:not(.vx-eyebrow),
.vx-process > p:not(.vx-eyebrow),
.vx-insights > p:not(.vx-eyebrow):not(.vx-insights-link) {
  max-width: 680px;
  color: var(--vx-muted);
  font-size: 17px;
  line-height: 1.8;
}

/* Rows of cards under the intro */
.vx-services > .wp-block-columns,
.vx-projects > .wp-block-columns,
.vx-process > .wp-block-columns,
.vx-insights > .wp-block-query {
  max-width: none;
  margin-top: var(--vx-gap-cards);
}

.vx-services > .wp-block-columns,
.vx-projects > .wp-block-columns {
  gap: 22px;
  align-items: stretch;
}

/* Card headings */
.vx-services h3,
.vx-projects h3,
.vx-process h3 {
  margin-top: 0;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  /* Run each section edge to edge on phones, whatever padding the theme
     puts around the page. The 20px below is then the only side margin. */
  .vx-hero,
  .vx-cta,
  .vx-services,
  .vx-projects,
  .vx-process,
  .vx-insights {
    width: 100vw;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
  }

  body {
    overflow-x: clip;
  }

  .vx-services,
  .vx-projects,
  .vx-process,
  .vx-insights {
    padding-inline: 20px;
  }

  .vx-services h2,
  .vx-projects h2,
  .vx-process h2,
  .vx-insights h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
  }

  .vx-services > .wp-block-columns,
  .vx-projects > .wp-block-columns {
    gap: 16px;
  }
}

/* ---------------------------------------------------------
   6. Services
   --------------------------------------------------------- */
.vx-services .wp-block-column {
  box-sizing: border-box;
  padding: 30px;
  background: var(--vx-card);
  border: 1px solid rgba(var(--vx-accent-rgb), 0.22);
  border-radius: 14px;
  transition: transform 200ms ease,
              border-color 200ms ease,
              background-color 200ms ease;
}

.vx-services .wp-block-column:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--vx-accent-rgb), 0.7);
  background: var(--vx-card-hover);
}

.vx-services h3 {
  margin-bottom: 14px;
}

.vx-services .wp-block-column p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--vx-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* "Learn more →" link inside each card (class: vx-service-link) */
.vx-services .wp-block-column p.vx-service-link {
  margin-top: 22px;
  font-weight: 600;
}

.vx-services a {
  color: var(--vx-accent-text);
  text-decoration: none;
  transition: color 180ms ease;
}

.vx-services a:hover {
  color: var(--vx-accent-text-hover);
}

@media (max-width: 768px) {
  .vx-services .wp-block-column {
    padding: 24px;
  }
}

/* ---------------------------------------------------------
   7. Projects
   --------------------------------------------------------- */
.vx-projects .wp-block-column {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0 30px;
  background: var(--vx-card);
  border: 1px solid var(--vx-border);
  border-radius: 14px;
  transition: transform 200ms ease, border-color 200ms ease;
}

.vx-projects .wp-block-column:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--vx-accent-rgb), 0.7);
}

/* Add the class "vx-no-card" to any Column that should NOT look like a card
   (no box, border, padding or hover lift), e.g. a "View all projects" tile. */
.vx-projects .wp-block-column.vx-no-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  transition: none;
}

.vx-projects .wp-block-column.vx-no-card:hover {
  transform: none;
  border-color: transparent;
}

.vx-projects .wp-block-column.vx-no-card > * {
  padding-inline: 0 !important;
}

.vx-projects .wp-block-image {
  margin: 0 0 24px;
}

.vx-projects .wp-block-image img {
  display: block;
  width: 100%;
  border-radius: 0;
}

.vx-projects .wp-block-column > :not(.wp-block-image) {
  padding-inline: 28px;
}

.vx-projects .vx-project-tag {
  margin: 0 0 10px;
  color: var(--vx-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.vx-projects h3 {
  margin-bottom: 12px;
}

.vx-projects .wp-block-column p:not(.vx-project-tag):not(.vx-project-link) {
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--vx-muted);
  font-size: 15px;
  line-height: 1.8;
}

.vx-projects .vx-project-link {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.vx-projects a {
  color: var(--vx-accent-text);
  text-decoration: none;
  transition: color 180ms ease;
}

.vx-projects a:hover {
  color: var(--vx-accent-text-hover);
}

/* ---------------------------------------------------------
   8. Process
   --------------------------------------------------------- */
.vx-process > .wp-block-columns {
  gap: 28px;
  align-items: stretch;
}

.vx-process .wp-block-column {
  position: relative;
  box-sizing: border-box;
  padding-top: 28px;
  border-top: 1px solid var(--vx-border);
}

/* Short accent line on top of each step */
.vx-process .wp-block-column::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--vx-accent);
}

.vx-process p.vx-step-number {
  margin: 0 0 18px;
  color: var(--vx-accent-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.vx-process h3 {
  margin-bottom: 12px;
}

.vx-process .wp-block-column p:not(.vx-step-number) {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--vx-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* Tablet: two steps per row instead of four cramped columns */
@media (min-width: 782px) and (max-width: 1024px) {
  .vx-process > .wp-block-columns {
    flex-wrap: wrap !important;
    row-gap: 40px;
  }

  .vx-process .wp-block-column {
    flex-basis: calc(50% - 14px) !important;
    flex-grow: 0;
  }
}

@media (max-width: 768px) {
  .vx-process > .wp-block-columns {
    gap: 32px;
  }
}

/* ---------------------------------------------------------
   9. Insights and post list (homepage Query Loop)
   WordPress wraps each post in a Columns block (25% / 75%);
   these rules restyle that structure as one row per post.
   --------------------------------------------------------- */
.vx-insights p.vx-insights-link {
  margin-top: 28px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 600;
}

.vx-insights a {
  color: var(--vx-accent-text);
  text-decoration: none;
  transition: color 180ms ease;
}

.vx-insights a:hover {
  color: var(--vx-accent-text-hover);
}

.vx-insights .wp-block-query .wp-block-post-template {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row per post */
.vx-insights .wp-block-query .wp-block-post-template li.wp-block-post {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0;
  padding: 14px;
  background: var(--vx-card);
  border: 1px solid var(--vx-border);
  border-radius: 14px;
  transition: transform 200ms ease, border-color 200ms ease;
}

.vx-insights .wp-block-query .wp-block-post-template li.wp-block-post:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--vx-accent-rgb), 0.7);
}

/* The post pattern wraps each row in a Columns block:
   left column = thumbnail, right column = title, category, date.
   !important beats the inline 25% / 75% widths WordPress sets. */
.vx-insights .wp-block-query .wp-block-post-template li.wp-block-post > .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px;
  margin: 0 !important;
}

.vx-insights .wp-block-query .wp-block-post-template li.wp-block-post > .wp-block-columns > .wp-block-column:first-child {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.vx-insights .wp-block-query .wp-block-post-template li.wp-block-post > .wp-block-columns > .wp-block-column:last-child {
  display: flex;
  flex: 1 1 0 !important;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Thumbnail */
.vx-insights .wp-block-query .wp-block-post-featured-image {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

.vx-insights .wp-block-query .wp-block-post-featured-image a {
  display: block;
}

.vx-insights .wp-block-query .wp-block-post-featured-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 10px;
}

/* Title: full width on the first line */
.vx-insights .wp-block-query .wp-block-post-title {
  flex: 0 0 100%;
  max-width: none;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: var(--vx-weight-sub);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.vx-insights .wp-block-query .wp-block-post-title a {
  color: #FFFFFF;
  font-size: inherit !important;
  text-decoration: none;
  transition: color 180ms ease;
}

.vx-insights .wp-block-query .wp-block-post-title a:hover {
  color: var(--vx-accent-text-hover);
}

/* Category and date share the line under the title */
.vx-insights .wp-block-query .wp-block-post-terms {
  margin: 0 !important;
  color: var(--vx-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.vx-insights .wp-block-query .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

.vx-insights .wp-block-query .wp-block-post-date {
  margin: 0 0 0 10px !important;
  color: #8A8A8A;
  font-size: 13px;
  white-space: nowrap;
}

.vx-insights .wp-block-query .wp-block-post-date::before {
  content: "\2022";
  margin-right: 10px;
  color: #6A6A6A;
}

.vx-insights .wp-block-query .wp-block-post-date a {
  color: inherit;
  text-decoration: none;
}

/* Excerpts are not used in the list layout */
.vx-insights .wp-block-query .wp-block-post-excerpt {
  display: none;
}

/* Pagination (Insights page) */
.vx-insights .wp-block-query .wp-block-query-pagination {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 40px;
  font-size: 15px;
}

.vx-insights .wp-block-query .wp-block-query-pagination a {
  color: var(--vx-muted);
  text-decoration: none;
}

.vx-insights .wp-block-query .wp-block-query-pagination a:hover,
.vx-insights .wp-block-query .wp-block-query-pagination .page-numbers.current {
  color: var(--vx-accent-text);
}

@media (max-width: 600px) {
  .vx-insights .wp-block-query .wp-block-post-template li.wp-block-post {
    padding: 12px;
  }

  .vx-insights .wp-block-query .wp-block-post-template li.wp-block-post > .wp-block-columns {
    gap: 16px;
  }

  .vx-insights .wp-block-query .wp-block-post-template li.wp-block-post > .wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px;
  }

  .vx-insights .wp-block-query .wp-block-post-title {
    margin: 0 0 6px !important;
    font-size: 16px !important;
  }

  /* Stack category and date on phones */
  .vx-insights .wp-block-query .wp-block-post-terms {
    flex: 0 0 100%;
    margin: 0 0 4px !important;
  }

  .vx-insights .wp-block-query .wp-block-post-date {
    flex: 0 0 100%;
    margin: 0 !important;
  }

  .vx-insights .wp-block-query .wp-block-post-date::before {
    display: none;
  }
}

/* ---------------------------------------------------------
   10. Call to action
   --------------------------------------------------------- */
.vx-cta {
  box-sizing: border-box;
  padding-block: clamp(44px, 5vw, 64px);
  padding-inline: 28px;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(var(--vx-accent-rgb), 0.22), transparent 60%),
    var(--vx-bg);
  border-top: 1px solid var(--vx-border);
  text-align: center;
}

/* Centred content column */
.vx-cta > * {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.vx-cta h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #FFFFFF;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: var(--vx-weight-heading);
  line-height: 1.12;
  letter-spacing: -1px;
}

.vx-cta > p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--vx-muted);
  font-size: 18px;
  line-height: 1.8;
}

.vx-cta .wp-block-buttons {
  justify-content: center;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .vx-cta {
    padding-inline: 20px;
  }

  .vx-cta h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
  }

  .vx-cta > p {
    font-size: 16px;
  }

  .vx-cta .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .vx-cta .wp-block-button .wp-block-button__link {
    width: 100%;
    padding: 14px 18px;
    text-align: center;
  }
}

/* ---------------------------------------------------------
   11. Footer
   The footer lives in Appearance → Widgets → Footer Widget 1.
   --------------------------------------------------------- */

/* Remove GeneratePress container limits around the widget */
.site-footer .footer-widgets {
  background: #0B0B0B;
  padding: 0;
}

.site-footer .footer-widgets-container {
  max-width: none !important;
  padding: 0 !important;
}

.site-footer .inside-footer-widgets {
  margin: 0 !important;
}

.site-footer .inside-footer-widgets > div {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .footer-widgets .widget {
  margin: 0;
  padding: 0;
}

.vx-footer {
  box-sizing: border-box;
  padding-top: 56px;
  padding-bottom: 40px;
  padding-inline: max(28px, calc((100% - 1180px) / 2));
  background: #0B0B0B;
  border-top: 1px solid var(--vx-border);
  text-align: left;
}

.vx-footer > * {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.vx-footer > .wp-block-columns {
  gap: 48px;
  margin: 0;
  align-items: flex-start;
  justify-content: space-between;
}

/* Every column: top-aligned, natural height. Nothing set in the
   editor (min-height, fixed height, vertical centring) can stretch it. */
.vx-footer > .wp-block-columns > .wp-block-column {
  flex: 0 1 auto !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}

.vx-footer .wp-block-group,
.vx-footer .wp-block-column > * {
  min-height: 0 !important;
}

/* Spacer blocks and empty paragraphs would add stray gaps */
.vx-footer .wp-block-spacer,
.vx-footer p:empty {
  display: none !important;
}

/* Logo: natural proportions, flush left, never stretched or forced tall */
.vx-footer .wp-block-image {
  float: none;
  width: auto !important;
  max-width: 220px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left;
}

.vx-footer .wp-block-image a {
  display: block;
  height: auto !important;
}

.vx-footer .wp-block-image img {
  display: block;
  width: auto !important;
  max-width: 220px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.vx-footer p {
  margin: 0 0 14px;
  color: var(--vx-muted);
  font-size: 15px;
  line-height: 1.8;
}

.vx-footer > .wp-block-columns > .wp-block-column:first-child p {
  max-width: 340px;
}

.vx-footer p.vx-footer-heading {
  margin-bottom: 20px;
  color: var(--vx-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vx-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vx-footer li {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}

.vx-footer a {
  color: var(--vx-muted);
  text-decoration: none;
  transition: color 180ms ease;
}

.vx-footer a:hover {
  color: var(--vx-accent-text-hover);
}

.vx-footer a:focus-visible {
  outline: 2px solid var(--vx-accent-text);
  outline-offset: 3px;
}

/* GeneratePress copyright bar */
.site-footer,
.site-footer .site-info {
  background: #0B0B0B;
}

.site-footer .site-info {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8A8A8A;
  font-size: 13px;
}

.site-footer .site-info a {
  color: #8A8A8A;
}

.site-footer .site-info a:hover {
  color: var(--vx-accent-text-hover);
}

@media (max-width: 781px) {
  .vx-footer {
    padding-inline: 20px;
  }

  .vx-footer > .wp-block-columns {
    gap: 36px;
  }

  .vx-footer > .wp-block-columns > .wp-block-column {
    flex: 1 1 100% !important;
  }
}

/* ---------------------------------------------------------
   12. Blog index, archives and single posts
   --------------------------------------------------------- */

/* ===== Blog index (/blog/) and archives (category, tag, author) ===== */

/* Heading added above the list on /blog/ (output by the plugin) */
.vx-blog-intro {
  padding-bottom: 16px;
}

.vx-blog-intro .vx-eyebrow {
  margin: 0 0 18px;
  color: var(--vx-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vx-blog-intro h1 {
  max-width: 760px;
  margin: 0 0 20px;
  color: #FFFFFF;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--vx-weight-heading);
  line-height: 1.15;
  letter-spacing: -1px;
}

.vx-blog-intro p:not(.vx-eyebrow) {
  max-width: 680px;
  margin: 0;
  color: var(--vx-muted);
  font-size: 17px;
  line-height: 1.8;
}

/* Archive title, e.g. "Category: Insights" */
.archive .page-header {
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: none !important;
}

.archive .page-title {
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--vx-weight-heading);
  letter-spacing: -0.8px;
}

/* Page column: a 3-column grid of cards.
   The heading, archive title and page numbers span the full width. */
:is(.blog, .archive) .site-main {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 28px 72px;
}

:is(.blog, .archive) .site-main > * {
  margin: 0 !important;
}

:is(.blog, .archive) .site-main > :not(article) {
  grid-column: 1 / -1;
}

:is(.blog, .archive) .site-main > article {
  display: flex;
  min-width: 0;
}

/* Card */
:is(.blog, .archive) .inside-article {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  padding: 0 0 26px !important;
  background: var(--vx-card) !important;
  border: 1px solid var(--vx-border);
  border-radius: 14px;
  box-shadow: none;
  transition: transform 200ms ease, border-color 200ms ease;
}

:is(.blog, .archive) .inside-article:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--vx-accent-rgb), 0.7);
}

/* Let the header and footer's children sit directly in the card,
   so they can be ordered: image, category, title, date */
:is(.blog, .archive) .inside-article > header.entry-header,
:is(.blog, .archive) .inside-article > footer.entry-meta {
  display: contents;
}

/* Image on top */
:is(.blog, .archive) .inside-article .post-image,
:is(.blog, .archive) .inside-article .featured-image {
  order: 1;
  width: 100%;
  margin: 0 0 22px !important;
}

:is(.blog, .archive) .inside-article .post-image a {
  display: block;
}

:is(.blog, .archive) .inside-article .post-image img,
:is(.blog, .archive) .inside-article .featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

/* Category */
:is(.blog, .archive) .inside-article footer.entry-meta .cat-links {
  order: 2;
  margin: 0 0 10px;
  padding-inline: 24px;
  color: var(--vx-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

:is(.blog, .archive) .inside-article footer.entry-meta .cat-links a {
  color: inherit;
  text-decoration: none;
}

/* Title */
:is(.blog, .archive) .inside-article .entry-title {
  order: 3;
  margin: 0 0 12px;
  padding-inline: 24px;
  font-size: 20px;
  font-weight: var(--vx-weight-sub);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

:is(.blog, .archive) .inside-article .entry-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 180ms ease;
}

:is(.blog, .archive) .inside-article .entry-title a:hover {
  color: var(--vx-accent-text-hover);
}

/* Date, pinned to the bottom so cards of different heights line up */
:is(.blog, .archive) .inside-article header.entry-header .entry-meta {
  order: 4;
  margin: auto 0 0;
  padding-inline: 24px;
  color: #8A8A8A;
  font-size: 13px;
}

:is(.blog, .archive) .inside-article header.entry-header .entry-meta a {
  color: inherit;
  text-decoration: none;
}

/* Not used in the cards: excerpt, author, tags, comments link, icons */
:is(.blog, .archive) .inside-article .entry-summary,
:is(.blog, .archive) .inside-article .entry-content,
:is(.blog, .archive) .inside-article .byline,
:is(.blog, .archive) .inside-article .tags-links,
:is(.blog, .archive) .inside-article .comments-link,
:is(.blog, .archive) .inside-article .gp-icon,
:is(.blog, .archive) .inside-article .posted-on time.updated:not(.entry-date) {
  display: none !important;
}

/* Page numbers */
:is(.blog, .archive) .paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.paging-navigation .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--vx-border);
  border-radius: 8px;
  color: var(--vx-muted);
  font-size: 14px;
  text-decoration: none;
}

.paging-navigation a.page-numbers:hover {
  border-color: var(--vx-accent);
  color: var(--vx-accent-text);
}

.paging-navigation .page-numbers.current {
  background: var(--vx-accent);
  border-color: var(--vx-accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* Tablet: two cards per row */
@media (max-width: 1024px) {
  :is(.blog, .archive) .site-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: one card per row */
@media (max-width: 600px) {
  :is(.blog, .archive) .site-main {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 36px 20px 56px;
  }

  :is(.blog, .archive) .inside-article .entry-title {
    font-size: 18px;
  }
}

/* Single post: narrow, readable column */
.single-post .inside-article {
  box-sizing: border-box;
  max-width: 780px;
  margin-inline: auto;
  padding: 56px 28px 72px;
  background: transparent !important;
}

.single-post .entry-header {
  margin-bottom: 28px;
}

.single-post .entry-title {
  margin: 0 0 14px;
  color: #FFFFFF;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--vx-weight-heading);
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.single-post .entry-meta {
  color: #8A8A8A;
  font-size: 14px;
}

.single-post .entry-meta a {
  color: var(--vx-accent-text);
  text-decoration: none;
}

.single-post .entry-meta a:hover {
  color: var(--vx-accent-text-hover);
}

/* Featured image */
.single-post .featured-image,
.single-post .post-image {
  margin: 0 0 32px;
}

.single-post .featured-image img,
.single-post .post-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vx-border);
  border-radius: 14px;
}

/* Article text */
.single-post .entry-content {
  color: #CFCFCF;
  font-size: 17px;
  line-height: 1.85;
}

.single-post .entry-content p {
  margin-bottom: 1.4em;
}

.single-post .entry-content h2 {
  margin: 2em 0 0.6em;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
}

.single-post .entry-content h3 {
  margin: 1.6em 0 0.5em;
  font-size: 22px;
  line-height: 1.3;
}

.single-post .entry-content a {
  color: var(--vx-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-post .entry-content a:hover {
  color: var(--vx-accent-text-hover);
}

.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 0 1.4em 1.4em;
}

.single-post .entry-content li {
  margin-bottom: 0.5em;
}

.single-post .entry-content img {
  height: auto;
  border-radius: 10px;
}

.single-post .entry-content blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--vx-accent);
  background: none;
  color: var(--vx-white);
}

.single-post .entry-content pre {
  padding: 18px;
  overflow-x: auto;
  background: var(--vx-card);
  border: 1px solid var(--vx-border);
  border-radius: 8px;
  color: var(--vx-white);
}

.single-post .entry-content code {
  padding: 2px 6px;
  background: var(--vx-card);
  border-radius: 4px;
  color: var(--vx-white);
}

.single-post .entry-content pre code {
  padding: 0;
  background: none;
}

/* Categories, tags, comments link */
.single-post footer.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--vx-border);
  color: #8A8A8A;
  font-size: 14px;
}

.single-post footer.entry-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.single-post footer.entry-meta a {
  color: var(--vx-muted);
  text-decoration: none;
}

.single-post footer.entry-meta a:hover {
  color: var(--vx-accent-text-hover);
}

.single-post footer.entry-meta .gp-icon {
  color: #6A6A6A;
}

/* Previous / next post */
.single-post .post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.single-post .post-navigation a {
  color: var(--vx-muted);
  font-size: 15px;
  text-decoration: none;
}

.single-post .post-navigation a:hover {
  color: var(--vx-accent-text-hover);
}

/* Comments (if enabled) */
.single-post .comments-area {
  box-sizing: border-box;
  max-width: 780px;
  margin: 48px auto 0;
  padding: 0 28px 72px;
  background: transparent !important;
  color: var(--vx-muted);
}

.single-post .comments-area label,
.single-post .comments-area .comment-reply-title {
  color: var(--vx-muted);
}

.single-post .comment-respond input[type="text"],
.single-post .comment-respond input[type="email"],
.single-post .comment-respond input[type="url"],
.single-post .comment-respond textarea {
  padding: 12px 14px;
  background: var(--vx-card);
  border: 1px solid var(--vx-border);
  border-radius: 8px;
  color: #FFFFFF;
}

.single-post .comment-respond .submit {
  padding: 13px 22px;
  background: var(--vx-accent);
  border: 0;
  border-radius: 6px;
  color: #FFFFFF;
  font-weight: 600;
}

.single-post .comment-respond .submit:hover {
  background: var(--vx-accent-hover);
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .single-post .inside-article {
    padding: 36px 20px 56px;
  }

  .single-post .comments-area {
    padding-inline: 20px;
  }
}

/* ---------------------------------------------------------
   13. Mobile spacing (phones and small tablets)
   Tighter padding and gaps. Placed last so it overrides the
   desktop values above; adjust the numbers to taste.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --vx-pad-y: 36px;
    --vx-gap-cards: 24px;
  }

  /* GeneratePress adds its own padding and margin around page content on
     small screens. Remove it on any page built from our sections (homepage,
     Software Development and so on), so the side margin is just the 20px
     each section sets for itself. */
  :is(.home, .page) .site-main:has(.vx-hero, .vx-services, .vx-projects, .vx-process, .vx-insights, .vx-cta) {
    margin: 0 !important;
  }

  :is(.home, .page) .inside-article:has(.vx-hero, .vx-services, .vx-projects, .vx-process, .vx-insights, .vx-cta) {
    padding: 0 !important;
  }

  .site-content:has(.vx-hero, .vx-services, .vx-projects, .vx-process, .vx-insights, .vx-cta) {
    padding: 0 !important;
  }

  .single-post .site-content,
  :is(.blog, .archive) .site-content {
    padding: 0 !important;
  }

  /* Header */
  .inside-header {
    padding: 8px 16px;
    gap: 12px;
  }

  .site-logo img,
  .site-branding img {
    max-width: 120px;
  }

  .main-navigation .menu-toggle,
  .mobile-menu-control-wrapper .menu-toggle {
    height: 42px;
    min-height: 0;
    padding: 0 14px;
    line-height: 42px;
  }

  /* Hero */
  .vx-hero {
    padding-block: 36px 40px;
    padding-inline: 20px;
  }

  .vx-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(32px, 9vw, 42px);
  }

  .vx-hero p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
  }

  .vx-hero .vx-eyebrow {
    margin-bottom: 16px;
  }

  .vx-hero .wp-block-buttons {
    gap: 10px;
    margin-top: 20px;
  }

  .vx-hero .wp-block-button .wp-block-button__link {
    padding: 12px 18px;
  }

  /* Sections: intro text */
  .vx-services .vx-eyebrow,
  .vx-projects .vx-eyebrow,
  .vx-process .vx-eyebrow,
  .vx-insights .vx-eyebrow {
    margin-bottom: 12px;
  }

  .vx-services h2,
  .vx-projects h2,
  .vx-process h2,
  .vx-insights h2 {
    margin-bottom: 14px;
    font-size: 30px;
    letter-spacing: -0.6px;
  }

  .vx-services > p:not(.vx-eyebrow),
  .vx-projects > p:not(.vx-eyebrow),
  .vx-process > p:not(.vx-eyebrow),
  .vx-insights > p:not(.vx-eyebrow):not(.vx-insights-link) {
    font-size: 16px;
    line-height: 1.7;
  }

  /* Sections: cards */
  .vx-services > .wp-block-columns,
  .vx-projects > .wp-block-columns {
    gap: 14px;
  }

  .vx-services .wp-block-column {
    padding: 20px;
  }

  .vx-projects .wp-block-column {
    padding-bottom: 22px;
  }

  .vx-projects .wp-block-image {
    margin-bottom: 18px;
  }

  .vx-projects .wp-block-column > :not(.wp-block-image) {
    padding-inline: 20px;
  }

  .vx-process > .wp-block-columns {
    gap: 24px;
  }

  .vx-process .wp-block-column {
    padding-top: 20px;
  }

  .vx-process p.vx-step-number {
    margin-bottom: 12px;
  }

  /* Call to action */
  .vx-cta {
    padding-block: 36px;
    padding-inline: 20px;
  }

  .vx-cta h2 {
    margin-bottom: 14px;
    font-size: 30px;
  }

  .vx-cta .wp-block-buttons {
    gap: 10px;
    margin-top: 24px;
  }

  /* Footer */
  .vx-footer {
    padding: 36px 20px 28px;
  }

  .vx-footer > .wp-block-columns {
    gap: 28px;
  }

  /* Blog, archives and single posts */
  :is(.blog, .archive) .site-main {
    padding: 28px 20px 44px;
  }

  .single-post .inside-article {
    padding: 28px 20px 44px;
  }
}

/* ---------------------------------------------------------
   14. Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vx-hero *,
  .vx-services *,
  .vx-projects *,
  .vx-process *,
  .vx-insights *,
  .vx-cta *,
  .vx-footer * {
    transition: none !important;
  }

  .vx-hero .wp-block-button .wp-block-button__link:hover,
  .vx-cta .wp-block-button .wp-block-button__link:hover,
  .vx-services .wp-block-column:hover,
  .vx-projects .wp-block-column:hover,
  .vx-insights .wp-block-query .wp-block-post-template li.wp-block-post:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  /* Beats any side padding the editor or theme puts on the section itself */
  .vx-services,
  .vx-projects,
  .vx-process,
  .vx-insights {
    padding-inline: 30px !important;
  }

  /* If the section has an inner wrapper (older Group markup), remove its spacing */
  :is(.vx-services, .vx-projects, .vx-process, .vx-insights) > .wp-block-group__inner-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Every top-level section on a page gets the same 20px side margin,
     whatever classes it has and whatever padding was set in the editor */
  .page .entry-content > .wp-block-group {
    box-sizing: border-box;
    padding-inline: 30px !important;
  }

  .page .entry-content > .wp-block-group > .wp-block-group__inner-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}