:root {
  color-scheme: light;

  --ink: #121417;
  --ink-2: #30343a;
  --muted: #686e77;

  --paper: #ffffff;
  --surface: #f6f6f4;
  --surface-2: #ececea;
  --surface-dark: #17191c;

  --line: #dfdfdc;
  --line-strong: #c9c9c4;

  --accent: #17191c;
  --accent-hover: #34383e;

  --shell: 1240px;
  --reading: 790px;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 30px;

  --shadow-sm:
    0 10px 28px rgba(18,20,23,.06);

  --shadow:
    0 28px 70px rgba(18,20,23,.11);

  --ease: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(18,20,23,.27);
  outline-offset: 4px;
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.reading {
  width: min(calc(100% - 40px), var(--reading));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ========================================================
   HEADER / NAVIGATION
   ======================================================== */

.site-header {
  position: sticky;
  z-index: 200;
  top: 0;

  border-bottom:
    1px solid rgba(223,223,220,.82);

  background:
    rgba(255,255,255,.93);

  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  font-weight: 850;
  letter-spacing: -.035em;

  text-decoration: none;
}

.brand-mark {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--ink);
  color: #fff;

  font-size: .86rem;
  letter-spacing: -.04em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}

.desktop-nav a {
  min-height: 42px;

  display: inline-flex;
  align-items: center;

  padding: 8px 12px;

  border-radius: 10px;

  color: #363a40;

  text-decoration: none;

  font-size: .94rem;
  font-weight: 680;

  transition:
    background var(--ease),
    color var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: #000;
  background: var(--surface);
}

.desktop-nav .nav-cta {
  margin-left: 9px;

  padding-inline: 15px;

  background: var(--ink);
  color: #fff;
}

.desktop-nav .nav-cta:hover {
  background: var(--accent-hover);
  color: #fff;
}


/* MOBILE MENU */

.menu-trigger {
  width: 44px;
  height: 44px;

  display: none;
  place-items: center;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: #fff;
  color: var(--ink);

  cursor: pointer;
}

.menu-trigger svg {
  width: 22px;
  height: 22px;
}

.mobile-overlay {
  position: fixed;
  z-index: 400;
  inset: 0;

  visibility: hidden;
  opacity: 0;

  background:
    rgba(18,20,23,.52);

  transition:
    opacity var(--ease),
    visibility var(--ease);
}

.mobile-overlay.active {
  visibility: visible;
  opacity: 1;
}

.mobile-panel {
  position: absolute;
  top: 0;
  right: 0;

  width: min(88vw, 370px);
  height: 100%;

  padding: 22px;

  background: #fff;

  transform: translateX(100%);

  transition:
    transform var(--ease);

  box-shadow:
    -24px 0 60px rgba(0,0,0,.17);
}

.mobile-overlay.active .mobile-panel {
  transform: translateX(0);
}

.mobile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 26px;
}

.menu-close {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  border-radius: 11px;

  background: #fff;

  cursor: pointer;
}

.menu-close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav {
  display: grid;
  gap: 6px;
}

.mobile-nav a {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: 11px 13px;

  border-radius: 11px;

  text-decoration: none;
  font-weight: 720;
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  background: var(--surface);
}


/* ========================================================
   TYPOGRAPHY
   ======================================================== */

.eyebrow {
  margin: 0 0 10px;

  color: var(--muted);

  font-size: .77rem;
  font-weight: 850;

  letter-spacing: .14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -.038em;
}

h1 {
  margin: 0;

  font-size:
    clamp(2.55rem, 5.8vw, 5.25rem);
}

h2 {
  font-size:
    clamp(1.8rem, 3.3vw, 3rem);
}

h3 {
  font-size: 1.25rem;
}

.lead {
  max-width: 760px;

  margin: 20px 0 0;

  color: var(--muted);

  font-size:
    clamp(1.04rem, 1.55vw, 1.25rem);
}


/* ========================================================
   BUTTONS
   ======================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;

  margin-top: 28px;
}

.btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 10px 17px;

  border:
    1px solid transparent;

  border-radius: 11px;

  text-decoration: none;
  font-weight: 760;

  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn svg {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  border-color: var(--line);
  background: #fff;
}

.btn-secondary:hover {
  border-color: var(--line-strong);
}


/* ========================================================
   HERO
   ======================================================== */

.hero {
  overflow: hidden;

  padding:
    clamp(66px, 9vw, 115px) 0;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(18,20,23,.07),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #fff,
      #f6f6f4
    );
}

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, .8fr);

  gap:
    clamp(40px, 7vw, 94px);

  align-items: center;
}

.hero-copy h1 {
  max-width: 850px;
}

.hero-portrait {
  position: relative;

  max-width: 440px;

  margin-left: auto;

  border-radius: var(--r-lg);

  overflow: hidden;

  background: var(--surface-2);

  box-shadow: var(--shadow);
}

.hero-portrait img {
  width: 100%;
  aspect-ratio: 4 / 4.35;
  object-fit: cover;
}

.hero-portrait::after {
  content: "";

  position: absolute;
  inset: 0;

  border:
    1px solid rgba(255,255,255,.4);

  border-radius: inherit;

  pointer-events: none;
}

.credential-line {
  margin-top: 20px;

  color: var(--muted);

  font-size: .92rem;
}


/* ========================================================
   BUSINESS PILLARS
   ======================================================== */

.pillars {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);

  border:
    1px solid var(--line);

  border-radius: var(--r-md);

  overflow: hidden;

  background: #fff;
}

.pillar {
  min-height: 120px;

  padding: 22px;

  border-right:
    1px solid var(--line);
}

.pillar:last-child {
  border-right: 0;
}

.pillar strong {
  display: block;

  margin-bottom: 5px;

  font-size: 1.02rem;
}

.pillar span {
  color: var(--muted);

  font-size: .9rem;
}


/* ========================================================
   SECTIONS
   ======================================================== */

.section {
  padding:
    clamp(64px, 8.5vw, 104px) 0;
}

.section-soft {
  background: var(--surface);
}

.section-dark {
  background: var(--surface-dark);
  color: #fff;
}

.section-head {
  max-width: 760px;

  margin-bottom: 36px;
}

.section-head h2 {
  margin: 0;
}

.section-head p {
  margin: 14px 0 0;
  color: var(--muted);
}

.section-dark .section-head p,
.section-dark .eyebrow {
  color: #bfc3c9;
}


/* ========================================================
   SERVICE CARDS
   ======================================================== */

.service-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 17px;
}

.service-card {
  min-height: 250px;

  padding: 23px;

  border:
    1px solid var(--line);

  border-radius: var(--r-md);

  background: #fff;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform var(--ease),
    box-shadow var(--ease),
    border-color var(--ease);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-3px);

  border-color:
    var(--line-strong);

  box-shadow: var(--shadow);
}

.icon-box {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  margin-bottom: 26px;

  border-radius: 12px;

  background: var(--surface);
}

.icon-box svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  margin:
    0 0 9px;
}

.service-card p {
  margin: 0;

  color: var(--muted);

  font-size: .94rem;
}


/* ========================================================
   PROFILE / BUSINESS CREDIBILITY
   ======================================================== */

.profile-grid {
  display: grid;

  grid-template-columns:
    minmax(280px, .7fr)
    minmax(0, 1.3fr);

  gap:
    clamp(36px, 7vw, 88px);

  align-items: center;
}

.profile-image {
  overflow: hidden;

  border-radius:
    var(--r-lg);

  background:
    var(--surface-2);

  box-shadow:
    var(--shadow);
}

.profile-image img {
  width: 100%;
  object-fit: cover;
}

.fact-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

  margin-top: 26px;
}

.fact {
  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: var(--r-sm);

  background: #fff;
}

.fact strong {
  display: block;
}

.fact span {
  color: var(--muted);
  font-size: .88rem;
}


/* ========================================================
   BLOG CARDS
   ======================================================== */

.blog-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;
}

.blog-card {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: var(--r-md);

  background: #fff;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform var(--ease),
    box-shadow var(--ease);
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.blog-card-media {
  overflow: hidden;

  background: var(--surface-2);
}

.blog-card-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;

  transition:
    transform 300ms ease;
}

.blog-card:hover img {
  transform: scale(1.018);
}

.blog-card-body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 21px;
}

.blog-card-date {
  margin-bottom: 9px;

  color: var(--muted);

  font-size: .8rem;
}

.blog-card h3 {
  margin: 0;
}

.blog-card p {
  margin: 12px 0 0;

  color: var(--muted);

  font-size: .93rem;
}

.text-link {
  margin-top: auto;
  padding-top: 18px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--ink);

  text-decoration: none;
  font-weight: 770;
}

.text-link svg {
  width: 17px;
  height: 17px;

  transition:
    transform var(--ease);
}

.text-link:hover svg {
  transform: translateX(3px);
}


/* ========================================================
   PAGE HERO
   ======================================================== */

.page-hero {
  padding: 70px 0 50px;

  border-bottom:
    1px solid var(--line);

  background: var(--surface);
}

.page-hero h1 {
  max-width: 920px;

  font-size:
    clamp(2.35rem, 5vw, 4.5rem);
}


/* ========================================================
   ARTICLE
   ======================================================== */

.breadcrumb {
  margin-bottom: 20px;

  font-size: .87rem;
  color: var(--muted);
}

.breadcrumb ol {
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  list-style: none;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.article-head {
  padding:
    62px 0 38px;
}

.article-head h1 {
  max-width: 1020px;

  font-size:
    clamp(2.25rem, 4.8vw, 4.35rem);
}

.article-meta {
  margin-top: 17px;

  color: var(--muted);

  font-size: .9rem;
}

.article-hero {
  width:
    min(calc(100% - 40px), 1080px);

  margin-inline: auto;

  overflow: hidden;

  border-radius:
    var(--r-lg);

  background:
    var(--surface-2);
}

.article-hero img {
  width: 100%;
  max-height: 610px;
  object-fit: cover;
}

.prose {
  padding-top: 54px;
  padding-bottom: 74px;

  font-size: 1.035rem;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2 {
  margin:
    2.25em 0 .7em;

  font-size:
    clamp(1.45rem, 2.4vw, 2.12rem);
}

.prose h3 {
  margin-top: 1.9em;
}

.prose p,
.prose ul,
.prose ol {
  margin:
    1.05em 0;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose strong {
  color: #111317;
}

.prose a {
  color: #111317;

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.content-media {
  margin:
    33px 0;

  overflow: hidden;

  border-radius:
    var(--r-md);

  background:
    var(--surface-2);
}

.content-media img {
  width: 100%;
}

.article-nav {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

  margin-top: 30px;
}

.article-nav a {
  min-height: 120px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 20px;

  border:
    1px solid var(--line);

  border-radius:
    var(--r-md);

  text-decoration: none;

  transition:
    border-color var(--ease),
    transform var(--ease);
}

.article-nav a:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.article-nav small {
  color: var(--muted);
}

.article-nav strong {
  margin-top: 5px;
}


/* ========================================================
   ABOUT / MISSION / VISION
   ======================================================== */

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 18px;
}

.mv-card {
  padding: 28px;

  border:
    1px solid var(--line);

  border-radius:
    var(--r-md);

  background: #fff;
}

.mv-card h2 {
  margin-top: 0;

  font-size: 1.55rem;
}


/* ========================================================
   CONTACT
   ======================================================== */

.contact-grid {
  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 46px;

  align-items: start;
}

.contact-form {
  display: grid;
  gap: 16px;

  padding: 27px;

  border:
    1px solid var(--line);

  border-radius:
    var(--r-md);

  background: #fff;

  box-shadow:
    var(--shadow-sm);
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 710;
}

.field input,
.field textarea {
  width: 100%;

  padding: 12px 13px;

  border:
    1px solid #cfd0cd;

  border-radius: 10px;

  background: #fff;
  color: var(--ink);
}

.field textarea {
  min-height: 145px;
  resize: vertical;
}

.form-note {
  margin: 0;

  color: var(--muted);

  font-size: .83rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 22px;
}

.social-link {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border:
    1px solid var(--line);

  border-radius:
    12px;

  background: #fff;

  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.social-link:hover {
  transform: translateY(-2px);

  background: var(--surface);

  border-color:
    var(--line-strong);
}

.social-link svg {
  width: 21px;
  height: 21px;
}


/* ========================================================
   CTA
   ======================================================== */

.cta-band {
  padding:
    clamp(28px, 5vw, 48px);

  border-radius:
    var(--r-lg);

  background:
    var(--surface-dark);

  color: #fff;
}

.cta-band h2 {
  margin-top: 0;
}

.cta-band p {
  max-width: 700px;

  color: #c4c8ce;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--ink);
}

.cta-band .btn-primary:hover {
  background: #ececea;
}


/* ========================================================
   FOOTER
   ======================================================== */

.site-footer {
  border-top:
    1px solid var(--line);

  margin-top: 64px;
}

.footer-top {
  padding: 44px 0 30px;

  display: grid;

  grid-template-columns:
    1.3fr .7fr .7fr;

  gap: 36px;
}

.footer-brand p {
  max-width: 440px;

  color: var(--muted);
}

.footer-nav {
  display: grid;
  gap: 8px;
}

.footer-nav a {
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-bottom {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  border-top:
    1px solid var(--line);

  color: var(--muted);

  font-size: .86rem;
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1050px) {
  .service-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .pillars {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .pillar:nth-child(2) {
    border-right: 0;
  }

  .pillar:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }

  .menu-trigger {
    display: grid;
  }

  .hero-grid,
  .profile-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero-portrait {
    margin:
      0 auto;
  }

  .blog-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .footer-top {
    grid-template-columns:
      1fr 1fr;
  }
}

@media (max-width: 650px) {
  .shell,
  .reading {
    width:
      min(calc(100% - 28px), var(--shell));
  }

  .header-inner {
    min-height: 66px;
  }

  .hero {
    padding:
      62px 0;
  }

  .section {
    padding:
      60px 0;
  }

  .service-grid,
  .blog-grid,
  .mv-grid,
  .article-nav {
    grid-template-columns: 1fr;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar {
    border-right: 0;
    border-bottom:
      1px solid var(--line);
  }

  .pillar:last-child {
    border-bottom: 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    padding:
      24px 0;

    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration:
      .01ms !important;
  }
}

/* ==========================================================
   NET3MAX MANCHEGO V2 PREMIUM CONSULTING
   Executive consulting visual optimization
   ========================================================== */

:root {
  --mc-v2-ink: #15171b;
  --mc-v2-text: #424750;
  --mc-v2-muted: #6b7078;
  --mc-v2-line: #e5e2dc;
  --mc-v2-soft: #f6f4f0;
  --mc-v2-card: #ffffff;
  --mc-v2-dark: #17191d;
}

/* ----------------------------------------------------------
   GLOBAL DENSITY
   Premium = controlled density, not oversized empty sections.
   ---------------------------------------------------------- */

.section {
  padding-block: clamp(3.4rem, 5.4vw, 4.7rem);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.1rem);
}

.section-head h2 {
  color: var(--mc-v2-ink);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.section-head p {
  color: var(--mc-v2-text);
  line-height: 1.65;
  max-width: 66ch;
}

.eyebrow {
  margin-bottom: .65rem;
}


/* ----------------------------------------------------------
   HERO / SPLIT "SLIDE"
   DESKTOP = TEXT FIRST, IMAGE SECOND
   ---------------------------------------------------------- */

.hero {
  padding-block:
    clamp(2.7rem, 4.8vw, 4.4rem)
    clamp(2.8rem, 4.5vw, 4rem);
}

.hero-grid {
  align-items: center;
  column-gap: clamp(2.5rem, 5vw, 5.25rem);
  row-gap: 2rem;
}

.hero-copy {
  order: 1;
  max-width: 760px;
}

.hero-portrait {
  order: 2;
  align-self: center;
}

.hero-copy h1 {
  color: var(--mc-v2-ink);
  line-height: .98;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

.hero .lead {
  color: var(--mc-v2-text);
  line-height: 1.65;
  max-width: 62ch;
  margin-top: 1.05rem;
}

.hero .actions {
  margin-top: 1.35rem;
  gap: .75rem;
}

.credential-line {
  color: var(--mc-v2-muted);
  margin-top: 1rem;
}


/* ----------------------------------------------------------
   VALUE PILLARS
   ---------------------------------------------------------- */

.pillars {
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
  gap: 0;
}

.pillar {
  padding: 1rem 1.15rem;
}

.pillar strong {
  color: var(--mc-v2-ink);
}

.pillar p {
  color: var(--mc-v2-muted);
}


/* ----------------------------------------------------------
   SERVICES
   Compact, executive, useful.
   ---------------------------------------------------------- */

.service-grid {
  gap: 1rem;
}

.service-card {
  padding: 1.35rem 1.35rem 1.4rem;
  min-height: 0;
  border-radius: 16px;
}

.icon-box {
  width: 42px;
  height: 42px;
}

.service-card h3 {
  color: var(--mc-v2-ink);
  font-size: 1.07rem;
  line-height: 1.23;
  letter-spacing: -0.018em;
  margin-top: .85rem;
  margin-bottom: .42rem;
}

.service-card p {
  color: #565c65;
  font-size: .94rem;
  line-height: 1.55;
}


/* ----------------------------------------------------------
   PROFILE / EXPERTISE
   ---------------------------------------------------------- */

.profile-grid {
  align-items: center;
  gap: clamp(2.3rem, 4.5vw, 4.5rem);
}

.profile-image {
  border-radius: 18px;
}

.fact-grid {
  gap: .8rem;
  margin-top: 1.3rem;
}

.fact {
  padding: 1rem 1.1rem;
}

.fact strong {
  color: var(--mc-v2-ink);
}

.fact p {
  color: var(--mc-v2-muted);
}


/* ----------------------------------------------------------
   BLOG
   Replace large black agency-style mass with a premium,
   editorial consulting treatment.
   ---------------------------------------------------------- */

.section-dark {
  background:
    linear-gradient(
      180deg,
      #f7f5f1 0%,
      #f3f1ec 100%
    );
  color: var(--mc-v2-ink);
}

.section-dark .eyebrow {
  color: #766e65;
}

.section-dark .section-head h2 {
  color: var(--mc-v2-ink);
}

.section-dark .section-head p {
  color: var(--mc-v2-text);
}

.blog-grid {
  gap: 1.15rem;
}

.blog-card {
  background: var(--mc-v2-card);
  color: var(--mc-v2-ink);
  border: 1px solid var(--mc-v2-line);
  border-radius: 17px;
  box-shadow:
    0 9px 24px rgb(20 23 27 / .055);
  overflow: hidden;
}

.blog-card-media {
  background: #ece9e4;
}

.blog-card-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card-body {
  padding: 1.12rem 1.2rem 1.25rem;
}

.blog-card-date {
  color: #80786f;
  font-size: .8rem;
  font-weight: 650;
}

.blog-card h3,
.blog-card h3 a {
  color: #14161a !important;
  font-size: clamp(1.04rem, 1.45vw, 1.24rem);
  line-height: 1.27;
  letter-spacing: -0.02em;
}

.blog-card p {
  color: #565c65 !important;
  font-size: .93rem;
  line-height: 1.58;
}

.blog-card .text-link,
.section-dark .text-link {
  color: #17191d !important;
  font-weight: 700;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-3px);
  box-shadow:
    0 15px 32px rgb(20 23 27 / .09);
}


/* ----------------------------------------------------------
   PAGE + ARTICLE TYPOGRAPHY
   Eliminate white/weak titles on light article backgrounds.
   ---------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3rem, 5vw, 4.8rem);
}

.page-hero h1,
.article-head h1 {
  color: var(--mc-v2-ink) !important;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.article-head {
  padding-top: clamp(2.8rem, 5vw, 4.6rem);
  padding-bottom: 1.25rem;
}

.article-meta {
  color: var(--mc-v2-muted);
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  color: var(--mc-v2-ink) !important;
}

article p,
article li {
  color: #383d45;
}

article a:not(.btn) {
  text-underline-offset: .16em;
}

.article-hero {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.article-nav {
  gap: 1rem;
  margin-top: 2.5rem;
}

.article-nav a {
  background: #fff;
  border: 1px solid var(--mc-v2-line);
}

.article-nav small {
  color: var(--mc-v2-muted);
}

.article-nav strong {
  color: var(--mc-v2-ink);
}


/* ----------------------------------------------------------
   CTA
   Keep one intentional dark band for contrast.
   ---------------------------------------------------------- */

.cta-band {
  padding:
    clamp(1.9rem, 3.2vw, 2.65rem)
    clamp(1.45rem, 3vw, 2.5rem);
  border-radius: 18px;
}

.cta-band h2 {
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cta-band p {
  max-width: 64ch;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer {
  padding-top: 2.8rem;
}

.footer-top {
  gap: 2.2rem;
}

.footer-brand p {
  color: #60656d;
  line-height: 1.55;
}

.footer-nav {
  gap: .5rem;
}

.footer-nav a {
  line-height: 1.45;
}

.footer-bottom {
  padding-block: 1.4rem;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .section {
    padding-block: 3.3rem;
  }

  .hero {
    padding-block: 2.5rem 3rem;
  }

  .hero-grid {
    column-gap: 2.4rem;
  }

  .service-card {
    padding: 1.25rem;
  }

  .blog-card-body {
    padding: 1.05rem 1.1rem 1.15rem;
  }
}


/* ----------------------------------------------------------
   MOBILE
   IMAGE FIRST → TEXT SECOND
   ---------------------------------------------------------- */

@media (max-width: 899px) {

  .hero {
    padding-block: 1.65rem 2.75rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .hero-portrait {
    order: 1;
    width: min(100%, 430px);
    margin-inline: auto;
  }

  .hero-copy {
    order: 2;
    max-width: none;
  }

  .hero-copy h1 {
    max-width: 15ch;
    font-size: clamp(2.25rem, 10vw, 3.35rem);
    line-height: .99;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.58;
  }

  .hero .actions {
    margin-top: 1.15rem;
  }

  .section {
    padding-block: 2.75rem;
  }

  .section-head {
    margin-bottom: 1.35rem;
  }

  .profile-grid {
    gap: 1.6rem;
  }

  .blog-grid {
    gap: 1rem;
  }

  .blog-card h3,
  .blog-card h3 a {
    font-size: 1.1rem;
  }

  .cta-band {
    padding: 1.65rem 1.25rem;
  }

  .site-footer {
    padding-top: 2.3rem;
  }

  .footer-top {
    gap: 1.65rem;
  }
}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

  .hero {
    padding-top: 1.25rem;
  }

  .hero-portrait {
    width: min(100%, 360px);
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 10.8vw, 2.75rem);
  }

  .section {
    padding-block: 2.35rem;
  }

  .service-card {
    padding: 1.15rem;
  }

  .blog-card-body {
    padding: 1rem 1.05rem 1.12rem;
  }

  .cta-band {
    border-radius: 15px;
  }
}


/* ==========================================================
   NET3MAX — MANCHEGO CONSULTING PREMIUM BRAND V3 R2

   Authentic visual system:
   primary    #0b5690
   secondary  #5789ab
   ink        #070707

   Original hero composition:
   managing-network.jpg + Sara-Manchego.png
   ========================================================== */

:root {
  --mc-blue: #0b5690;
  --mc-blue-secondary: #5789ab;

  --mc-ink: #070707;
  --mc-text: #2d3740;
  --mc-muted: #69757e;

  --mc-blue-soft: #e7eef4;
  --mc-blue-line: #d3e1eb;

  --mc-white: #ffffff;
  --mc-surface: #f7f9fa;
  --mc-surface-warm: #faf9f7;

  --mc-dark: #151b20;

  --mc-shadow:
    0 18px 44px rgb(17 39 55 / .08);

  --mc-card-shadow:
    0 12px 28px rgb(17 39 55 / .07);
}


/* ==========================================================
   GLOBAL
   ========================================================== */

body {
  color: var(--mc-text);
  background: var(--mc-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--mc-ink);
  letter-spacing: -.022em;
}

.shell {
  width: min(
    calc(100% - 40px),
    1240px
  );
}


/* ==========================================================
   AUTHENTIC BRAND
   ========================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;

  width: clamp(
    160px,
    14vw,
    194px
  );

  height: auto;

  max-height: 56px;

  object-fit: contain;

  object-position: left center;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.desktop-nav a {
  color: var(--mc-ink);
  font-weight: 600;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--mc-blue);
}

.desktop-nav .nav-cta {
  color: var(--mc-white);

  background: var(--mc-blue);

  border-color: var(--mc-blue);

  box-shadow: none;
}

.desktop-nav .nav-cta:hover,
.desktop-nav .nav-cta:focus-visible {
  color: var(--mc-white);
  filter: brightness(.92);
}


/* ==========================================================
   BRAND LABELS
   ========================================================== */

.eyebrow {
  color: var(--mc-blue);

  font-weight: 750;

  letter-spacing: .085em;
}


/* ==========================================================
   HERO — PREMIUM CONSULTING
   ========================================================== */

.hero {
  background:
    linear-gradient(
      135deg,
      var(--mc-white) 0%,
      var(--mc-white) 60%,
      var(--mc-blue-soft) 100%
    );
}

.hero-grid {
  align-items: center;

  gap:
    clamp(
      2.4rem,
      5vw,
      5.2rem
    );
}

.hero-copy {
  order: 1;
  max-width: 680px;
}

.hero-copy h1 {
  max-width: 15ch;

  color: var(--mc-ink);

  font-size:
    clamp(
      2.8rem,
      5vw,
      4.15rem
    );

  line-height: 1;

  letter-spacing: -.045em;
}

.hero-copy .lead {
  max-width: 58ch;

  color: var(--mc-text);

  font-size:
    clamp(
      1.05rem,
      1.5vw,
      1.18rem
    );

  line-height: 1.68;
}


/* ==========================================================
   ORIGINAL MANCHEGO HERO COMPOSITION
   managing-network + Sara
   ========================================================== */

.hero-portrait {
  order: 2;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  min-height: 500px;

  border:
    1px solid
    var(--mc-blue-line);

  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgb(8 37 56 / .04),
      rgb(8 37 56 / .22)
    ),
    url("../media/home/home-hero-managing-network.webp")
    center center / cover
    no-repeat;

  box-shadow: var(--mc-shadow);
}


/* restrained brand-light treatment */

.hero-portrait::before {
  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  background:
    linear-gradient(
      100deg,
      rgb(255 255 255 / .12),
      transparent 42%
    );

  pointer-events: none;
}


/* ground Sara visually without creating a black banner */

.hero-portrait::after {
  content: "";

  position: absolute;

  z-index: 1;

  left: 0;
  right: 0;
  bottom: 0;

  height: 30%;

  background:
    linear-gradient(
      to top,
      rgb(8 30 44 / .27),
      transparent
    );

  pointer-events: none;
}


.hero-portrait picture,
.hero-portrait > img {
  position: relative;

  z-index: 2;
}


.hero-portrait img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: center bottom;

  filter:
    drop-shadow(
      0 18px 24px
      rgb(2 22 36 / .20)
    );
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary {
  color: var(--mc-white);

  background: var(--mc-blue);

  border-color: var(--mc-blue);

  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--mc-white);

  filter: brightness(.92);
}


.btn-secondary {
  color: var(--mc-ink);

  background: transparent;

  border-color: var(--mc-blue-line);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--mc-blue);

  background: var(--mc-white);

  border-color: var(--mc-blue);
}


/* ==========================================================
   CONTROLLED INFORMATION DENSITY
   ========================================================== */

.section {
  padding-block:
    clamp(
      3.25rem,
      5vw,
      4.65rem
    );
}

.section-soft {
  background: var(--mc-surface);
}

.section-head {
  margin-bottom:
    clamp(
      1.8rem,
      3vw,
      2.7rem
    );
}

.section-head h2 {
  color: var(--mc-ink);

  font-size:
    clamp(
      2rem,
      3.4vw,
      3rem
    );

  line-height: 1.08;

  letter-spacing: -.035em;
}

.section-head p {
  color: var(--mc-muted);
}


/* ==========================================================
   PILLARS
   ========================================================== */

.pillar {
  background: var(--mc-white);

  border-top:
    2px solid
    var(--mc-blue);
}


/* ==========================================================
   SERVICES
   ========================================================== */

.service-grid {
  gap: 18px;
}

.service-card {
  padding: 1.4rem;

  background: var(--mc-white);

  border:
    1px solid
    var(--mc-blue-line);

  border-radius: 16px;

  box-shadow: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.service-card:hover {
  transform: translateY(-3px);

  border-color: var(--mc-blue);

  box-shadow: var(--mc-card-shadow);
}

.service-card h3 {
  color: var(--mc-ink);
}

.service-card p {
  color: var(--mc-muted);

  line-height: 1.58;
}

.icon-box {
  width: 42px;
  height: 42px;

  color: var(--mc-blue);

  background: var(--mc-blue-soft);

  border:
    1px solid
    var(--mc-blue-line);
}


/* ==========================================================
   PROFILE
   ========================================================== */

.profile-grid {
  align-items: center;

  gap:
    clamp(
      2.3rem,
      5vw,
      4.7rem
    );
}

.profile-image {
  overflow: hidden;

  border-radius: 20px;

  box-shadow: var(--mc-shadow);
}


/* ==========================================================
   BLOG / INSIGHTS
   ========================================================== */

.section-dark {
  color: var(--mc-text);

  background:
    linear-gradient(
      180deg,
      var(--mc-surface-warm),
      var(--mc-surface)
    );
}

.section-dark .eyebrow {
  color: var(--mc-blue);
}

.section-dark h2,
.section-dark h3 {
  color: var(--mc-ink);
}

.section-dark p {
  color: var(--mc-muted);
}

.blog-grid {
  gap: 20px;
}

.blog-card {
  overflow: hidden;

  background: var(--mc-white);

  border:
    1px solid
    var(--mc-blue-line);

  border-radius: 16px;

  box-shadow: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.blog-card:hover {
  transform: translateY(-3px);

  border-color: var(--mc-blue);

  box-shadow: var(--mc-card-shadow);
}

.blog-card-body {
  padding:
    1.25rem
    1.3rem
    1.4rem;
}

.blog-card-date {
  color: var(--mc-blue);

  font-weight: 650;
}

.blog-card h3 {
  color: var(--mc-ink) !important;

  line-height: 1.27;
}

.blog-card p {
  color: var(--mc-muted) !important;
}


/* ==========================================================
   INTERNAL PAGES
   ========================================================== */

.page-hero {
  background:
    linear-gradient(
      135deg,
      var(--mc-white),
      var(--mc-blue-soft)
    );
}

.page-hero h1,
.article-head h1 {
  color: var(--mc-ink) !important;

  letter-spacing: -.04em;
}

.article-head {
  max-width: 860px;
}

.article-head .meta {
  color: var(--mc-blue);
}


/* ==========================================================
   FINAL CTA — ONE DELIBERATE DARK MOMENT
   ========================================================== */

.cta-band {
  color: var(--mc-white);

  background:
    linear-gradient(
      135deg,
      #151b20,
      #183042
    );
}

.cta-band h2,
.cta-band p {
  color: var(--mc-white);
}

.cta-band .btn-primary {
  color: var(--mc-blue);

  background: var(--mc-white);

  border-color: var(--mc-white);
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {
  border-top:
    1px solid
    var(--mc-blue-line);
}


/* ==========================================================
   MOBILE
   IMAGE FIRST -> TEXT SECOND
   ========================================================== */

@media (max-width: 899px) {

  .shell {
    width:
      min(
        calc(100% - 28px),
        1240px
      );
  }

  .brand-logo {
    width: 145px;

    max-height: 46px;
  }

  .hero-grid {
    gap: 1.9rem;
  }

  .hero-portrait {
    order: 1;

    min-height: 370px;

    border-radius: 18px;

    background-position:
      center center;
  }

  .hero-copy {
    order: 2;
  }

  .hero-copy h1 {
    font-size:
      clamp(
        2.35rem,
        10vw,
        3.2rem
      );
  }

  .section {
    padding-block: 2.9rem;
  }
}


@media (max-width: 480px) {

  .brand-logo {
    width: 132px;
  }

  .hero-portrait {
    min-height: 330px;

    border-radius: 16px;
  }

  .section {
    padding-block: 2.5rem;
  }

  .service-card {
    padding: 1.2rem;
  }
}


/* ==========================================================
   MANCHEGO CONSULTING — PREMIUM VISUAL V4
   CSS-ONLY visual candidate.

   VERIFIED BRAND:
   #0b5690 primary
   #5789ab secondary
   #070707 ink
   ========================================================== */


/* ----------------------------------------------------------
   HEADER — more authority, less tiny-template feeling
   ---------------------------------------------------------- */

.site-header {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(11,86,144,.12);
  box-shadow: 0 4px 24px rgba(16,39,56,.035);
}

@media (min-width: 900px) {

  .site-header .shell {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand-logo {
    width: 218px;
    max-height: none;
  }

  .desktop-nav {
    gap: 28px;
  }

  .desktop-nav a {
    font-size: .95rem;
    letter-spacing: -.01em;
  }

}


/* ----------------------------------------------------------
   HERO
   FULL BACKGROUND IMAGE - NOT A SMALL CARD ANYMORE
   ---------------------------------------------------------- */

.hero {
  position: relative;

  overflow: hidden;

  min-height: 650px;

  display: flex;
  align-items: center;

  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(4,24,39,.94) 0%,
      rgba(7,46,74,.88) 40%,
      rgba(11,86,144,.54) 70%,
      rgba(11,86,144,.26) 100%
    ),
    url("../media/home/home-hero-managing-network.webp")
    center center / cover
    no-repeat;
}


/* subtle executive texture */

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      transparent 36%,
      rgba(0,0,0,.10)
    );
}


.hero .shell {
  position: relative;
  z-index: 2;
}


.hero-grid {
  min-height: 650px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, .95fr);

  align-items: center;

  gap:
    clamp(
      2.5rem,
      5vw,
      5.5rem
    );
}


/* ----------------------------------------------------------
   HERO COPY
   ---------------------------------------------------------- */

.hero-copy {
  order: 1;

  max-width: 710px;

  padding-block: 72px;
}


.hero-copy .eyebrow {
  color: #a9d3ef;

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .15em;
}


.hero-copy h1 {
  max-width: 13ch;

  margin-top: 16px;

  color: #fff !important;

  font-size:
    clamp(
      3.4rem,
      5.7vw,
      5.25rem
    );

  line-height: .95;

  letter-spacing: -.058em;

  text-shadow:
    0 3px 22px rgba(0,0,0,.18);
}


.hero-copy .lead,
.hero-copy > p {
  max-width: 59ch;

  color:
    rgba(255,255,255,.87) !important;

  font-size:
    clamp(
      1.05rem,
      1.5vw,
      1.19rem
    );

  line-height: 1.7;
}


/* Small supporting statement */

.hero-copy small,
.hero-copy .microcopy {
  color:
    rgba(255,255,255,.68);
}


/* ----------------------------------------------------------
   HERO BUTTONS
   ---------------------------------------------------------- */

.hero .btn-primary {
  color: #0b5690;

  background: #fff;

  border-color: #fff;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.15);
}


.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  color: #0b5690;

  background: #f4f8fb;

  filter: none;

  transform: translateY(-1px);
}


.hero .btn-secondary {
  color: #fff;

  background:
    rgba(255,255,255,.06);

  border-color:
    rgba(255,255,255,.52);

  backdrop-filter:
    blur(8px);
}


.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible {
  color: #fff;

  border-color: #fff;

  background:
    rgba(255,255,255,.14);
}


/* ----------------------------------------------------------
   SARA
   Remove the "image inside a card" appearance completely.
   ---------------------------------------------------------- */

.hero-portrait {
  order: 2;

  position: relative;

  min-height: 620px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  overflow: visible;

  background: none !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}


.hero-portrait::before,
.hero-portrait::after {
  display: none !important;
}


.hero-portrait picture,
.hero-portrait > img {
  position: relative;
  z-index: 3;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  width: 100%;
  height: 100%;
}


.hero-portrait img {
  width: auto;

  max-width: min(100%, 500px);

  height: auto;

  max-height: 610px;

  margin-inline: auto;

  object-fit: contain;

  object-position: center bottom;

  filter:
    drop-shadow(
      0 25px 30px
      rgba(0,0,0,.34)
    );

  transform:
    translateY(10px)
    scale(1.04);
}


/* ----------------------------------------------------------
   PROOF / VALUE STRIP
   Make the small four boxes feel like a consulting proof bar.
   ---------------------------------------------------------- */

.pillar {
  position: relative;

  padding:
    1.45rem
    1.55rem;

  background: #fff;

  border: 0;

  border-top:
    3px solid
    #0b5690;

  box-shadow:
    0 14px 32px
    rgba(21,49,68,.07);
}


.pillar h3,
.pillar strong {
  color: #070707;
}


.pillar p {
  color: #66737d;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
   ---------------------------------------------------------- */

.section-head .eyebrow {
  margin-bottom: .65rem;
}


.section-head h2 {
  max-width: 17ch;

  font-size:
    clamp(
      2.45rem,
      4vw,
      3.55rem
    );

  line-height: 1;

  letter-spacing: -.046em;
}


/* ----------------------------------------------------------
   SERVICES
   More consulting, less generic SaaS.
   ---------------------------------------------------------- */

.service-grid {
  gap: 20px;
}


.service-card {
  position: relative;

  overflow: hidden;

  min-height: 190px;

  padding:
    1.65rem
    1.55rem;

  background: #fff;

  border:
    1px solid
    rgba(11,86,144,.14);

  border-radius: 18px;

  box-shadow:
    0 9px 30px
    rgba(21,49,68,.045);
}


.service-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #0b5690,
      #5789ab
    );
}


.service-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(11,86,144,.34);

  box-shadow:
    0 20px 45px
    rgba(21,49,68,.10);
}


.icon-box {
  width: 46px;
  height: 46px;

  margin-bottom: 1.1rem;

  color: #0b5690;

  background: #e7eef4;

  border:
    1px solid
    #d3e1eb;

  border-radius: 12px;
}


.service-card h3 {
  margin-bottom: .55rem;

  font-size: 1.08rem;

  line-height: 1.25;

  color: #070707;
}


.service-card p {
  font-size: .94rem;

  line-height: 1.62;

  color: #65727c;
}


/* ----------------------------------------------------------
   PROFILE / EXPERIENCE
   ---------------------------------------------------------- */

.profile-grid {
  padding:
    clamp(
      2rem,
      4vw,
      3.4rem
    );

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f9fc 100%
    );

  border:
    1px solid
    rgba(11,86,144,.13);

  border-radius: 24px;

  box-shadow:
    0 18px 45px
    rgba(21,49,68,.055);
}


.profile-image {
  border-radius: 20px;

  background:
    linear-gradient(
      150deg,
      #f4f7f8,
      #e7eef4
    );

  box-shadow:
    0 18px 35px
    rgba(21,49,68,.09);
}


/* ----------------------------------------------------------
   BLOG
   ---------------------------------------------------------- */

.section-dark {
  background:
    linear-gradient(
      180deg,
      #f4f7f9,
      #ffffff
    );
}


.blog-card {
  border-radius: 18px;

  border:
    1px solid
    rgba(11,86,144,.14);

  box-shadow:
    0 10px 32px
    rgba(21,49,68,.05);
}


.blog-card img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.blog-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(11,86,144,.32);

  box-shadow:
    0 20px 45px
    rgba(21,49,68,.10);
}


.blog-card-date {
  color: #0b5690;
}


.blog-card h3 {
  color: #070707 !important;

  font-size: 1.08rem;

  line-height: 1.3;
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.cta-band {
  position: relative;

  overflow: hidden;

  padding:
    clamp(
      2.5rem,
      5vw,
      4.4rem
    );

  border-radius: 24px;

  background:
    linear-gradient(
      120deg,
      #071a28 0%,
      #0b3654 58%,
      #0b5690 140%
    );

  box-shadow:
    0 20px 45px
    rgba(7,31,47,.14);
}


.cta-band h2 {
  max-width: 23ch;

  font-size:
    clamp(
      2.1rem,
      3.4vw,
      3.2rem
    );

  line-height: 1.05;

  letter-spacing: -.04em;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer {
  padding-top: 3rem;

  border-top:
    1px solid
    rgba(11,86,144,.12);
}


/* ==========================================================
   MOBILE
   Image FIRST, then text.
   Background still fills entire hero.
   ========================================================== */

@media (max-width: 899px) {

  .site-header .shell {
    min-height: 70px;
  }


  .brand-logo {
    width: 168px;

    max-height: none;
  }


  .hero {
    min-height: 0;

    background:
      linear-gradient(
        180deg,
        rgba(4,24,39,.68) 0%,
        rgba(6,42,67,.77) 48%,
        rgba(4,24,39,.96) 100%
      ),
      url("../media/home/home-hero-managing-network.webp")
      center center / cover
      no-repeat;
  }


  .hero-grid {
    min-height: 0;

    grid-template-columns: 1fr;

    gap: 0;
  }


  .hero-portrait {
    order: 1;

    min-height: 410px;

    padding-top: 30px;
  }


  .hero-portrait img {
    max-width: 370px;

    max-height: 400px;

    transform:
      translateY(5px)
      scale(1.03);
  }


  .hero-copy {
    order: 2;

    max-width: none;

    padding:
      2rem
      0
      3.3rem;
  }


  .hero-copy h1 {
    max-width: 13ch;

    font-size:
      clamp(
        2.7rem,
        11vw,
        4rem
      );

    line-height: .97;
  }


  .hero-copy .lead,
  .hero-copy > p {
    color:
      rgba(255,255,255,.88) !important;
  }


  .section-head h2 {
    font-size:
      clamp(
        2.15rem,
        8vw,
        3rem
      );
  }


  .profile-grid {
    padding: 1.5rem;

    border-radius: 20px;
  }

}


@media (max-width: 480px) {

  .brand-logo {
    width: 150px;
  }


  .hero-portrait {
    min-height: 350px;
  }


  .hero-portrait img {
    max-width: 315px;

    max-height: 345px;
  }


  .hero-copy {
    padding-bottom: 2.8rem;
  }


  .service-card {
    min-height: 0;

    padding: 1.35rem;
  }


  .cta-band {
    border-radius: 18px;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   COMPACT PREMIUM V4.1 R1

   Goal:
   less text
   less dead space
   tighter executive rhythm
   preserve authentic visual identity
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

@media (min-width: 900px) {

  .site-header .shell {
    min-height: 72px;
  }

  .brand-logo {
    width: 205px;
  }

  .desktop-nav {
    gap: 24px;
  }

}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hero {
  min-height: 510px;
}


.hero-grid {
  min-height: 510px;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, .86fr);

  gap:
    clamp(
      1.75rem,
      3.4vw,
      3.75rem
    );
}


.hero-copy {
  max-width: 620px;

  padding-block: 32px;
}


.hero-copy .eyebrow {
  margin:
    0
    0
    .65rem;

  font-size: .7rem;

  letter-spacing: .14em;
}


.hero-copy h1 {
  max-width: 10.5ch;

  margin:
    0
    0
    .85rem;

  font-size:
    clamp(
      2.9rem,
      4.65vw,
      4.3rem
    );

  line-height: .96;

  letter-spacing: -.052em;
}


.hero-copy .lead {
  max-width: 40ch;

  margin:
    0
    0
    1.2rem;

  font-size:
    clamp(
      .98rem,
      1.25vw,
      1.08rem
    );

  line-height: 1.5;
}


.hero-actions {
  display: flex;

  align-items: center;

  gap: 1.1rem;

  flex-wrap: wrap;
}


.hero .hero-actions .btn-primary {
  min-height: 0;

  padding:
    .72rem
    1.05rem;

  border-radius: 8px;

  font-size: .91rem;
}


.hero-text-link {
  display: inline-flex;

  align-items: center;

  gap: .4rem;

  color:
    rgba(255,255,255,.93);

  font-size: .92rem;

  font-weight: 700;

  text-decoration: none;
}


.hero-text-link:hover,
.hero-text-link:focus-visible {
  color: #fff;

  text-decoration: underline;
}


.hero-portrait {
  min-height: 500px;
}


.hero-portrait img {
  max-width:
    min(
      100%,
      455px
    );

  max-height: 495px;

  transform:
    translateY(8px)
    scale(1.03);
}


/* ----------------------------------------------------------
   GLOBAL SECTION RHYTHM
   ---------------------------------------------------------- */

.section {
  padding-block:
    clamp(
      1.9rem,
      2.7vw,
      2.8rem
    );
}


/* Value strip directly after hero:
   deliberately tighter than normal sections. */

.hero + .section {
  padding-block:
    1.35rem;
}


/* ----------------------------------------------------------
   FOUR PILLARS
   ---------------------------------------------------------- */

.pillars {
  gap: 10px;
}


.pillar {
  padding:
    .9rem
    1rem;

  border-radius: 10px;

  box-shadow:
    0 6px 18px
    rgba(21,49,68,.045);
}


.pillar strong {
  margin-bottom: .18rem;

  font-size: .94rem;
}


.pillar span {
  font-size: .84rem;

  line-height: 1.38;
}


/* ----------------------------------------------------------
   SECTION HEADERS
   ---------------------------------------------------------- */

.section-head {
  margin-bottom:
    clamp(
      1.05rem,
      1.6vw,
      1.5rem
    );
}


.section-head .eyebrow {
  margin-bottom: .32rem;
}


.section-head h2 {
  max-width: 20ch;

  margin-bottom: .55rem;

  font-size:
    clamp(
      1.9rem,
      2.9vw,
      2.75rem
    );

  line-height: 1.04;

  letter-spacing: -.038em;
}


.section-head p {
  max-width: 62ch;

  margin: 0;

  font-size: .95rem;

  line-height: 1.48;
}


/* ----------------------------------------------------------
   SERVICES
   ---------------------------------------------------------- */

.service-grid {
  gap: 10px;
}


.service-card {
  min-height: 138px;

  padding:
    1rem
    1.05rem;

  border-radius: 12px;
}


.service-card::before {
  height: 2px;
}


.icon-box {
  width: 36px;
  height: 36px;

  margin-bottom: .62rem;

  border-radius: 9px;
}


.service-card h3 {
  margin-bottom: .28rem;

  font-size: .96rem;

  line-height: 1.22;
}


.service-card p {
  margin: 0;

  font-size: .84rem;

  line-height: 1.42;
}


/* ----------------------------------------------------------
   EXPERIENCE
   ---------------------------------------------------------- */

.profile-grid {
  gap:
    clamp(
      1.35rem,
      2.5vw,
      2.4rem
    );

  padding:
    clamp(
      1.2rem,
      2vw,
      1.8rem
    );

  border-radius: 16px;
}


.profile-image {
  border-radius: 14px;
}


/* ----------------------------------------------------------
   BLOG
   ---------------------------------------------------------- */

.blog-grid {
  gap: 12px;
}


.blog-card {
  border-radius: 12px;
}


.blog-card-body {
  padding:
    .85rem
    .9rem
    .95rem;
}


.blog-card-date {
  margin-bottom: .25rem;

  font-size: .73rem;
}


.blog-card h3 {
  margin-bottom: .4rem;

  font-size: .96rem;

  line-height: 1.22;
}


.blog-card p {
  margin-bottom: .55rem;

  font-size: .83rem;

  line-height: 1.43;
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.cta-band {
  padding:
    clamp(
      1.6rem,
      2.6vw,
      2.35rem
    );

  border-radius: 16px;
}


.cta-band h2 {
  margin-bottom: .5rem;

  font-size:
    clamp(
      1.8rem,
      2.7vw,
      2.45rem
    );
}


.cta-band p {
  margin-bottom: .85rem;

  line-height: 1.45;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer {
  padding-top: 1.7rem;
}


/* ==========================================================
   MOBILE
   Sara first, content second.
   ========================================================== */

@media (max-width: 899px) {

  .site-header .shell {
    min-height: 64px;
  }


  .brand-logo {
    width: 158px;
  }


  .hero {
    min-height: 0;
  }


  .hero-grid {
    min-height: 0;

    gap: 0;
  }


  .hero-portrait {
    order: 1;

    min-height: 320px;

    padding-top: 12px;
  }


  .hero-portrait img {
    max-width: 305px;

    max-height: 320px;

    transform:
      translateY(5px)
      scale(1.02);
  }


  .hero-copy {
    order: 2;

    padding:
      1.25rem
      0
      2rem;
  }


  .hero-copy .eyebrow {
    margin-bottom: .5rem;
  }


  .hero-copy h1 {
    max-width: 11ch;

    margin-bottom: .7rem;

    font-size:
      clamp(
        2.25rem,
        9.4vw,
        3.15rem
      );

    line-height: .98;
  }


  .hero-copy .lead {
    margin-bottom: 1rem;
  }


  .section {
    padding-block: 1.65rem;
  }


  .hero + .section {
    padding-block: 1rem;
  }


  .section-head {
    margin-bottom: 1rem;
  }


  .service-grid {
    gap: 8px;
  }


  .service-card {
    min-height: 0;
  }


  .profile-grid {
    padding: 1rem;
  }

}


@media (max-width: 480px) {

  .hero-portrait {
    min-height: 285px;
  }


  .hero-portrait img {
    max-width: 270px;

    max-height: 285px;
  }


  .hero-actions {
    gap: .8rem;
  }


  .section {
    padding-block: 1.45rem;
  }


  .service-card {
    padding: .9rem;
  }


  .cta-band {
    border-radius: 14px;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V4.2 — EXECUTIVE DENSITY

   Goals:
   - Sara anchored to hero bottom
   - eliminate visible floating crop
   - integrated value ribbon
   - stronger service icons
   - horizontal service-card composition
   - use desktop width more efficiently
   - less vertical dead space
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 900px) {


  /* --------------------------------------------------------
     HERO
     -------------------------------------------------------- */

  .hero {
    min-height: 500px;
  }


  .hero-grid {
    position: relative;

    min-height: 500px;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, .78fr);

    gap: 2rem;
  }


  .hero-copy {
    position: relative;

    z-index: 4;

    max-width: 590px;

    padding-block: 32px;
  }


  .hero-copy h1 {
    max-width: 11.2ch;

    font-size:
      clamp(
        3rem,
        4.25vw,
        4.2rem
      );

    line-height: .95;
  }


  /*
   * IMPORTANT:
   *
   * Sara becomes independent from the grid flow.
   * Her lower crop aligns exactly with the hero bottom.
   */

  .hero-portrait {
    position: absolute;

    z-index: 3;

    right:
      clamp(
        4rem,
        8vw,
        9rem
      );

    bottom: 0;

    width:
      min(
        390px,
        31vw
      );

    height: auto;

    min-height: 0;

    margin: 0;

    padding: 0;

    display: block;

    overflow: visible;

    border: 0;

    background: none;

    box-shadow: none;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    display: none;
  }


  .hero-portrait img {
    display: block;

    width: 100%;

    height: auto;

    max-width: none;

    max-height: none;

    margin: 0;

    padding: 0;

    object-fit: contain;

    object-position: center bottom;

    transform: none;

    filter:
      drop-shadow(
        0 18px 24px
        rgba(0,0,0,.24)
      );
  }


  /* --------------------------------------------------------
     VALUE RIBBON

     Remove four floating rectangles.
     Present one coherent executive proof bar.
     -------------------------------------------------------- */

  .hero + .section {
    position: relative;

    z-index: 8;

    padding:
      0
      0
      1.35rem;
  }


  .hero + .section > .shell {
    transform:
      translateY(-24px);

    margin-bottom:
      -24px;
  }


  .pillars {
    display: grid;

    grid-template-columns:
      repeat(4, 1fr);

    gap: 0;

    overflow: hidden;

    background: #fff;

    border:
      1px solid
      rgba(11,86,144,.16);

    border-top:
      3px solid
      #0b5690;

    border-radius: 15px;

    box-shadow:
      0 15px 35px
      rgba(22,52,72,.09);
  }


  .pillar {
    min-height: 86px;

    padding:
      1rem
      1.15rem;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
  }


  .pillar + .pillar {
    border-left:
      1px solid
      rgba(11,86,144,.12);
  }


  .pillar strong {
    display: block;

    margin-bottom: .3rem;

    color: #070707;

    font-size: .94rem;
  }


  .pillar span {
    display: block;

    color: #65737d;

    font-size: .83rem;

    line-height: 1.36;
  }


  /* --------------------------------------------------------
     SECTION DENSITY
     -------------------------------------------------------- */

  .hero ~ .section {
    padding-block:
      clamp(
        1.7rem,
        2.2vw,
        2.3rem
      );
  }


  /* --------------------------------------------------------
     SECTION HEADS

     Use unused horizontal desktop space.
     -------------------------------------------------------- */

  .hero ~ .section .section-head {
    display: grid;

    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(300px, .72fr);

    column-gap:
      clamp(
        2rem,
        4vw,
        4.5rem
      );

    row-gap: .4rem;

    align-items: end;

    margin-bottom: 1.25rem;
  }


  .hero ~ .section .section-head .eyebrow {
    grid-column:
      1 / -1;

    margin:
      0
      0
      .15rem;
  }


  .hero ~ .section .section-head h2 {
    grid-column: 1;

    margin: 0;

    max-width: 16ch;

    font-size:
      clamp(
        2.1rem,
        3vw,
        2.85rem
      );

    line-height: 1.02;
  }


  .hero ~ .section .section-head > p:not(.eyebrow) {
    grid-column: 2;

    margin:
      0
      0
      .18rem;

    max-width: 46ch;

    font-size: .94rem;

    line-height: 1.5;
  }


  /* --------------------------------------------------------
     SERVICES

     Horizontal executive card:
     icon | title + explanation
     -------------------------------------------------------- */

  .service-grid {
    gap: 12px;
  }


  .service-card {
    display: grid;

    grid-template-columns:
      50px
      minmax(0, 1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: .95rem;

    row-gap: .2rem;

    align-content: start;

    min-height: 112px;

    padding:
      1rem
      1.05rem;

    border-radius: 14px;

    border-color:
      rgba(11,86,144,.13);

    box-shadow:
      0 8px 22px
      rgba(20,49,68,.045);
  }


  .service-card::before {
    height: 2px;
  }


  /*
   * Icons become the strongest visual identification
   * element inside each service.
   */

  .service-card .icon-box {
    grid-column: 1;

    grid-row:
      1 / 3;

    align-self: start;

    display: grid;

    place-items: center;

    width: 48px;

    height: 48px;

    margin: 0;

    border: 0;

    border-radius: 13px;

    color: #fff;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #2475ad
      );

    box-shadow:
      0 8px 18px
      rgba(11,86,144,.20);
  }


  .service-card .icon-box svg {
    width: 23px;

    height: 23px;

    stroke-width: 1.8;
  }


  .service-card h3 {
    grid-column: 2;

    grid-row: 1;

    align-self: end;

    margin: 0;

    font-size: .98rem;

    line-height: 1.22;
  }


  .service-card p {
    grid-column: 2;

    grid-row: 2;

    margin: 0;

    color: #64727c;

    font-size: .84rem;

    line-height: 1.4;
  }


  .service-card:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(11,86,144,.30);

    box-shadow:
      0 15px 32px
      rgba(20,49,68,.09);
  }


  .service-card:hover .icon-box {
    transform:
      translateY(-1px);

    box-shadow:
      0 10px 22px
      rgba(11,86,144,.27);
  }


  /* --------------------------------------------------------
     EXPERIENCE
     -------------------------------------------------------- */

  .profile-grid {
    gap:
      clamp(
        1.5rem,
        2.8vw,
        2.7rem
      );

    padding:
      clamp(
        1.15rem,
        1.8vw,
        1.65rem
      );
  }


  /* --------------------------------------------------------
     BLOG
     -------------------------------------------------------- */

  .blog-grid {
    gap: 12px;
  }


  .blog-card-body {
    padding:
      .82rem
      .9rem
      .95rem;
  }


  /* --------------------------------------------------------
     CTA
     -------------------------------------------------------- */

  .cta-band {
    padding:
      clamp(
        1.55rem,
        2.35vw,
        2.15rem
      );
  }

}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 899px) {


  /*
   * Mobile remains normal document flow.
   * Sara stays first as already approved.
   */

  .hero-portrait {
    position: relative;

    right: auto;

    bottom: auto;

    width: 100%;

    min-height: 290px;

    margin: 0;

    padding-top: 8px;

    display: flex;

    align-items: flex-end;

    justify-content: center;
  }


  .hero-portrait img {
    display: block;

    width:
      min(
        285px,
        78vw
      );

    height: auto;

    max-width: none;

    max-height: none;

    margin:
      0
      auto;

    transform: none;
  }


  /*
   * No overlap on mobile:
   * avoids clipping / narrow-screen instability.
   */

  .hero + .section {
    padding-block:
      1rem;
  }


  .hero + .section > .shell {
    transform: none;

    margin-bottom: 0;
  }


  .pillars {
    grid-template-columns:
      1fr
      1fr;

    gap: 0;

    overflow: hidden;

    border:
      1px solid
      rgba(11,86,144,.15);

    border-top:
      3px solid
      #0b5690;

    border-radius: 13px;

    background: #fff;
  }


  .pillar {
    min-height: 78px;

    padding:
      .85rem
      .9rem;

    border: 0;

    border-radius: 0;

    box-shadow: none;
  }


  .pillar:nth-child(even) {
    border-left:
      1px solid
      rgba(11,86,144,.12);
  }


  .pillar:nth-child(n+3) {
    border-top:
      1px solid
      rgba(11,86,144,.12);
  }


  .section-head {
    display: block;
  }


  .section-head h2 {
    margin-bottom: .5rem;
  }


  .service-card {
    display: grid;

    grid-template-columns:
      46px
      minmax(0,1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: .8rem;

    row-gap: .15rem;

    min-height: 0;

    padding:
      .9rem;

    border-radius: 12px;
  }


  .service-card .icon-box {
    grid-column: 1;

    grid-row:
      1 / 3;

    width: 44px;

    height: 44px;

    margin: 0;

    display: grid;

    place-items: center;

    color: #fff;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #2475ad
      );

    border: 0;

    border-radius: 12px;

    box-shadow:
      0 7px 15px
      rgba(11,86,144,.18);
  }


  .service-card .icon-box svg {
    width: 21px;

    height: 21px;
  }


  .service-card h3 {
    grid-column: 2;

    grid-row: 1;

    margin: 0;

    font-size: .95rem;
  }


  .service-card p {
    grid-column: 2;

    grid-row: 2;

    margin: 0;

    font-size: .83rem;
  }

}


@media (max-width: 560px) {

  .pillars {
    grid-template-columns: 1fr;
  }


  .pillar:nth-child(even) {
    border-left: 0;
  }


  .pillar + .pillar {
    border-top:
      1px solid
      rgba(11,86,144,.12);
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.0 R3 — PREMIUM CONSULTING
   ========================================================== */

:root {
  --v5-blue: #0b5690;
  --v5-blue-2: #5789ab;
  --v5-ink: #071724;
  --v5-text: #566671;
  --v5-line: rgba(11,86,144,.14);
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
  background: rgba(255,255,255,.985);
  border-bottom: 1px solid rgba(11,86,144,.10);
  box-shadow: 0 3px 18px rgba(8,39,59,.035);
}


@media (min-width: 900px) {

  .site-header .shell {
    min-height: 72px;
  }

  .brand-logo {
    width: 205px;
    max-height: none;
  }

  .desktop-nav {
    gap: 24px;
  }

}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 500px;

  color: #fff;

  background:
    radial-gradient(
      circle at 77% 44%,
      rgba(146,205,238,.24) 0%,
      rgba(95,168,208,.13) 22%,
      rgba(28,91,128,.05) 42%,
      transparent 59%
    ),
    linear-gradient(
      90deg,
      rgba(3,20,33,.97) 0%,
      rgba(4,31,50,.93) 31%,
      rgba(6,51,80,.76) 54%,
      rgba(11,86,144,.40) 78%,
      rgba(11,86,144,.22) 100%
    ),
    url("../media/home/home-hero-managing-network.webp")
    center 47% / cover no-repeat;
}


.hero::before {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 42%,
      rgba(0,12,20,.15)
    );

  pointer-events: none;
}


.hero::after {
  content: "";

  position: absolute;
  z-index: 0;

  left: 55%;
  right: 0;
  bottom: 0;

  height: 48%;

  background:
    linear-gradient(
      to top,
      rgba(2,22,36,.24),
      transparent
    );

  pointer-events: none;
}


.hero .shell {
  position: relative;
  z-index: 2;
}


.hero-grid {
  position: relative;

  min-height: 500px;

  display: grid;

  grid-template-columns:
    minmax(0,.96fr)
    minmax(360px,1.04fr);

  align-items: center;

  gap:
    clamp(2rem,4vw,4.2rem);
}


.hero-copy {
  position: relative;
  z-index: 5;

  max-width: 610px;

  padding-block: 34px;
}


.hero-copy .eyebrow {
  margin: 0 0 .68rem;

  color: #b9def5;

  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .145em;
}


.hero-copy h1 {
  max-width: 10.8ch;

  margin: 0 0 .86rem;

  color: #fff !important;

  font-size:
    clamp(
      3rem,
      4.35vw,
      4.25rem
    );

  line-height: .95;
  letter-spacing: -.054em;

  text-shadow:
    0 3px 20px rgba(0,0,0,.16);
}


.hero-copy .lead {
  max-width: 39ch;

  margin: 0 0 1.2rem;

  color:
    rgba(255,255,255,.89) !important;

  font-size:
    clamp(
      .99rem,
      1.22vw,
      1.08rem
    );

  line-height: 1.5;
}


.hero-actions {
  display: flex;
  align-items: center;

  gap: 1.15rem;

  flex-wrap: wrap;
}


.hero .btn-primary {
  min-height: 0;

  padding: .76rem 1.08rem;

  color: var(--v5-blue);

  background: #fff;

  border-color: #fff;
  border-radius: 9px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.14);
}


.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  color: var(--v5-blue);

  background: #f3f8fb;

  filter: none;

  transform: translateY(-1px);
}


.hero-text-link {
  display: inline-flex;
  align-items: center;

  gap: .4rem;

  color:
    rgba(255,255,255,.95);

  font-size: .93rem;
  font-weight: 700;

  text-decoration: none;
}


.hero-text-link:hover,
.hero-text-link:focus-visible {
  color: #fff;

  text-decoration: underline;
}


/* ==========================================================
   SARA — DESKTOP
   ========================================================== */

@media (min-width: 900px) {

  .hero-portrait {
    position: absolute;

    z-index: 4;

    right:
      clamp(
        2rem,
        6vw,
        6.8rem
      );

    bottom: -3px;

    width:
      clamp(
        360px,
        27vw,
        420px
      );

    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: visible;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    pointer-events: none;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    display: none !important;
  }


  .hero-portrait img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;
    max-height: none;

    margin: 0;

    object-fit: contain;
    object-position: center bottom;

    transform: none;

    filter:
      saturate(.94)
      contrast(1.025)
      brightness(.99)
      drop-shadow(
        0 17px 24px rgba(0,0,0,.22)
      );
  }

}


/* ==========================================================
   IMPORTANT RESET:
   V4.2 formerly treated the immediate section after Hero
   as the floating value ribbon. In V5, Services is now the
   immediate section, so neutralize inherited overlap rules.
   ========================================================== */

.hero + .services-section {
  position: relative;

  z-index: 1;

  padding:
    clamp(
      2.65rem,
      3.4vw,
      3.65rem
    )
    0 !important;

  background:
    linear-gradient(
      180deg,
      #f5f8fa 0%,
      #fafbfc 100%
    );
}


.hero + .services-section > .shell {
  transform: none !important;

  margin-bottom: 0 !important;
}


/* ==========================================================
   SERVICES
   ========================================================== */

@media (min-width: 1100px) {

  .hero + .services-section .section-head {
    display: grid;

    grid-template-columns:
      minmax(0,1.18fr)
      minmax(320px,.75fr);

    column-gap:
      clamp(
        2.5rem,
        5vw,
        5rem
      );

    row-gap: .35rem;

    align-items: end;

    margin-bottom: 1.65rem;
  }


  .hero + .services-section
  .section-head .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: .1rem;
  }


  .hero + .services-section
  .section-head h2 {
    grid-column: 1;

    max-width: 16ch;

    margin: 0;

    font-size:
      clamp(
        2.1rem,
        2.9vw,
        2.85rem
      );

    line-height: 1.01;
    letter-spacing: -.043em;
  }


  .hero + .services-section
  .section-head > p:not(.eyebrow) {
    grid-column: 2;

    max-width: 43ch;

    margin: 0 0 .15rem;

    color: #65737d;

    font-size: .95rem;

    line-height: 1.5;
  }


  .services-section .service-grid {
    display: grid;

    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );

    gap: 15px;
  }


  .services-section .service-card {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    aspect-ratio: 1.10 / 1;

    min-height: 0;

    padding:
      1.4rem
      1.3rem;

    overflow: hidden;

    background:
      linear-gradient(
        155deg,
        #fff,
        #fbfcfd
      );

    border:
      1px solid
      var(--v5-line);

    border-radius: 17px;

    box-shadow:
      0 9px 26px rgba(15,48,69,.055);

    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }


  .services-section .service-card::before {
    height: 3px;

    background:
      linear-gradient(
        90deg,
        var(--v5-blue),
        var(--v5-blue-2)
      );
  }


  .services-section .icon-box {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    margin: 0 0 1.2rem;

    color: #fff;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      );

    border: 0;
    border-radius: 16px;

    box-shadow:
      0 10px 22px rgba(11,86,144,.22);
  }


  .services-section .icon-box svg {
    width: 29px;
    height: 29px;

    stroke-width: 1.75;
  }


  .services-section .service-card h3 {
    margin: 0 0 .52rem;

    color: var(--v5-ink);

    font-size: 1.05rem;

    line-height: 1.22;
    letter-spacing: -.014em;
  }


  .services-section .service-card p {
    margin: 0;

    color: #687680;

    font-size: .89rem;

    line-height: 1.48;
  }


  .services-section .service-card:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(11,86,144,.34);

    box-shadow:
      0 19px 40px rgba(15,48,69,.10);
  }

}


/* ==========================================================
   EXPERIENCE
   ========================================================== */

.hero ~ .experience-section {
  padding:
    clamp(
      3rem,
      4.2vw,
      4.25rem
    )
    0 !important;

  background: #fff;
}


.experience-section .profile-grid {
  display: grid;

  align-items: center;

  gap:
    clamp(
      2.35rem,
      5vw,
      4.8rem
    );

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


@media (min-width: 900px) {

  .experience-section .profile-grid {
    grid-template-columns:
      minmax(320px,.86fr)
      minmax(0,1.14fr);
  }


  .experience-section .profile-image {
    position: relative;

    overflow: hidden;

    min-height: 420px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding:
      1rem
      1rem
      0;

    background:
      radial-gradient(
        circle at 50% 31%,
        #fff 0%,
        #f0f6fa 48%,
        #e2edf4 100%
      );

    border:
      1px solid var(--v5-line);

    border-radius: 23px;

    box-shadow:
      0 17px 36px rgba(13,47,69,.075);
  }


  .experience-section .profile-image img {
    display: block;

    width: auto;

    max-width: 100%;
    max-height: 420px;

    margin: 0 auto;

    object-fit: contain;
    object-position: center bottom;
  }


  .experience-section h2 {
    max-width: 15ch;

    margin-bottom: .9rem;

    font-size:
      clamp(
        2.35rem,
        3.2vw,
        3.15rem
      );

    line-height: 1.02;
    letter-spacing: -.044em;
  }


  .experience-section .lead {
    max-width: 61ch;

    line-height: 1.62;
  }

}


.experience-section .fact-grid {
  gap: 1.5rem;

  margin-top: 1.3rem;
}


.experience-section .fact {
  padding: .8rem 0 0;

  background: transparent;

  border: 0;

  border-top:
    2px solid rgba(11,86,144,.22);

  border-radius: 0;

  box-shadow: none;
}


.experience-section .fact strong {
  display: block;

  margin-bottom: .25rem;

  color: var(--v5-blue);

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.65rem
    );
}


/* ==========================================================
   INSIGHTS
   ========================================================== */

.hero ~ .insights-section {
  padding:
    clamp(
      2.8rem,
      3.8vw,
      3.8rem
    )
    0 !important;

  color: #26343e;

  background:
    linear-gradient(
      180deg,
      #f4f8fa,
      #fff
    );
}


.insights-section .eyebrow {
  color: var(--v5-blue);
}


.insights-section h2,
.insights-section h3 {
  color: var(--v5-ink) !important;
}


.insights-section p {
  color: #687680 !important;
}


@media (min-width: 1100px) {

  .hero ~ .insights-section .section-head {
    display: grid;

    grid-template-columns:
      minmax(0,1.15fr)
      minmax(320px,.75fr);

    column-gap:
      clamp(
        2.5rem,
        5vw,
        5rem
      );

    row-gap: .35rem;

    align-items: end;

    margin-bottom: 1.55rem;
  }


  .hero ~ .insights-section
  .section-head .eyebrow {
    grid-column: 1 / -1;
  }


  .hero ~ .insights-section
  .section-head h2 {
    grid-column: 1;

    margin: 0;
  }


  .hero ~ .insights-section
  .section-head > p:not(.eyebrow) {
    grid-column: 2;

    margin: 0 0 .15rem;
  }

}


.insights-section .blog-grid {
  gap: 15px;
}


.insights-section .blog-card {
  overflow: hidden;

  background: #fff;

  border:
    1px solid rgba(11,86,144,.12);

  border-radius: 16px;

  box-shadow:
    0 9px 26px rgba(18,48,67,.05);
}


.insights-section .blog-card-media {
  position: relative;

  overflow: hidden;

  width: 100%;

  aspect-ratio: 16 / 9;

  background:
    linear-gradient(
      135deg,
      #dfe8ee,
      #f1f5f7
    );
}


.insights-section .blog-card-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;

  object-fit: cover !important;
  object-position: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter: none !important;

  transform: scale(1);

  transition:
    transform .28s ease;
}


.insights-section
.blog-card:hover
.blog-card-media img {
  transform:
    scale(1.025);
}


.insights-section .blog-card-body {
  padding:
    1rem
    1.05rem
    1.15rem;
}


/* ==========================================================
   CTA
   ========================================================== */

.hero ~ .cta-section {
  padding:
    clamp(
      2.2rem,
      3vw,
      2.9rem
    )
    0 !important;

  background: #fff;
}


.cta-section .cta-band {
  overflow: hidden;

  padding:
    clamp(
      1.9rem,
      3vw,
      2.65rem
    );

  border-radius: 19px;

  background:
    linear-gradient(
      120deg,
      #061925 0%,
      #0a334e 58%,
      #0b5690 138%
    );

  box-shadow:
    0 18px 39px rgba(6,31,48,.13);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
  margin: 0;

  padding:
    2.75rem
    0
    1.15rem;

  color:
    rgba(235,244,249,.80);

  background:
    linear-gradient(
      145deg,
      #051622 0%,
      #072639 60%,
      #09334c 100%
    );

  border-top:
    3px solid var(--v5-blue);
}


.site-footer .footer-top {
  display: grid;

  grid-template-columns:
    minmax(0,1.7fr)
    minmax(150px,.65fr)
    minmax(180px,.65fr);

  gap:
    clamp(
      2rem,
      5vw,
      5rem
    );

  align-items: start;
}


.site-footer .footer-brand {
  max-width: 430px;
}


.site-footer .footer-brand > strong {
  display: block;

  margin-bottom: .55rem;

  color: #fff;

  font-size: 1.13rem;
}


.site-footer .footer-brand p {
  max-width: 37ch;

  margin: 0 0 1rem;

  color:
    rgba(226,238,245,.70);

  line-height: 1.55;
}


.site-footer .footer-nav {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: .55rem;
}


.site-footer .footer-nav > strong {
  margin-bottom: .25rem;

  color: #fff;

  font-size: .88rem;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.site-footer a {
  color:
    rgba(240,247,251,.86);

  text-decoration: none;
}


.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;

  text-decoration: underline;
}


.site-footer .social-links {
  display: flex;

  align-items: center;

  gap: .55rem;
}


.site-footer .social-link {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  color: #fff;

  background:
    rgba(255,255,255,.075);

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 50%;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.site-footer .social-link:hover {
  transform:
    translateY(-2px);

  background:
    rgba(11,86,144,.62);

  border-color:
    rgba(143,200,237,.38);

  text-decoration: none;
}


.site-footer .social-link svg {
  width: 18px;
  height: 18px;
}


.site-footer
.footer-nav
.btn-primary {
  margin-top: .3rem;

  color: #fff;

  background: var(--v5-blue);

  border-color: var(--v5-blue);
}


.site-footer .footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1.2rem;

  margin-top: 2rem;

  padding-top: 1rem;

  color:
    rgba(220,233,241,.58);

  border-top:
    1px solid rgba(255,255,255,.10);

  font-size: .82rem;
}


.net3max-credit {
  color: #91caee !important;

  font-weight: 700;

  text-decoration: none !important;
}


.net3max-credit:hover,
.net3max-credit:focus-visible {
  color: #fff !important;

  text-decoration: underline !important;
}


/* ==========================================================
   TABLET SERVICES
   ========================================================== */

@media (min-width: 700px) and (max-width: 1099px) {

  .hero + .services-section {
    padding:
      2.35rem
      0 !important;
  }


  .services-section .service-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 13px;
  }


  .services-section .service-card {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 1.25rem;

    border-radius: 15px;
  }


  .services-section .icon-box {
    width: 58px;
    height: 58px;

    margin-bottom: 1rem;

    display: grid;

    place-items: center;

    color: #fff;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      );

    border: 0;

    border-radius: 15px;

    box-shadow:
      0 9px 20px rgba(11,86,144,.20);
  }


  .services-section .icon-box svg {
    width: 26px;
    height: 26px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 899px) {

  .site-header .shell {
    min-height: 64px;
  }


  .brand-logo {
    width: 154px;

    max-height: none;
  }


  .hero {
    min-height: 0;

    background:
      radial-gradient(
        circle at 50% 17%,
        rgba(145,205,238,.20),
        transparent 40%
      ),
      linear-gradient(
        180deg,
        rgba(5,44,68,.52) 0%,
        rgba(4,30,48,.82) 46%,
        rgba(3,20,33,.98) 100%
      ),
      url("../media/home/home-hero-managing-network.webp")
      center center / cover
      no-repeat;
  }


  .hero-grid {
    min-height: 0;

    display: flex;

    flex-direction: column;

    gap: 0;
  }


  .hero-portrait {
    order: 1;

    position: relative;

    right: auto;
    bottom: auto;

    width: 100%;

    min-height: 285px;

    margin: 0;

    padding:
      10px
      0
      0;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    overflow: hidden;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    display: none !important;
  }


  .hero-portrait img {
    display: block;

    width: auto;
    height: 285px;

    max-width: 80vw;
    max-height: none;

    margin: 0 auto;

    object-fit: contain;
    object-position: center bottom;

    transform: none;

    filter:
      saturate(.95)
      contrast(1.02)
      drop-shadow(
        0 12px 18px rgba(0,0,0,.21)
      );
  }


  .hero-copy {
    order: 2;

    width: 100%;

    max-width: none;

    padding:
      1.15rem
      0
      1.9rem;
  }


  .hero-copy .eyebrow {
    margin-bottom: .48rem;

    font-size: .64rem;

    letter-spacing: .12em;
  }


  .hero-copy h1 {
    max-width: 11.5ch;

    margin-bottom: .68rem;

    font-size:
      clamp(
        2.2rem,
        9.7vw,
        3.1rem
      );

    line-height: .97;
  }


  .hero-copy .lead {
    max-width: 34ch;

    margin-bottom: .95rem;
  }


  .hero-actions {
    gap: .82rem;
  }


  /* Services now immediately follow hero. */

  .hero + .services-section {
    padding:
      2.05rem
      0 !important;
  }


  .hero + .services-section > .shell {
    transform: none !important;

    margin-bottom: 0 !important;
  }


  .services-section .section-head {
    display: block;

    margin-bottom: 1.2rem;
  }


  .services-section
  .section-head h2 {
    max-width: 15ch;

    font-size:
      clamp(
        1.95rem,
        8vw,
        2.6rem
      );
  }


  .services-section .service-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }


  .services-section .service-card {
    display: grid;

    grid-template-columns:
      58px
      minmax(0,1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: .95rem;
    row-gap: .18rem;

    align-items: start;

    min-height: 0;

    aspect-ratio: auto;

    padding:
      .95rem
      1rem;

    border-radius: 14px;
  }


  .services-section .icon-box {
    grid-column: 1;
    grid-row: 1 / 3;

    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    margin: 0;

    color: #fff;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      );

    border: 0;

    border-radius: 14px;

    box-shadow:
      0 8px 18px rgba(11,86,144,.18);
  }


  .services-section .icon-box svg {
    width: 25px;
    height: 25px;
  }


  .services-section
  .service-card h3 {
    grid-column: 2;
    grid-row: 1;

    margin: 0;

    font-size: .97rem;

    line-height: 1.22;
  }


  .services-section
  .service-card p {
    grid-column: 2;
    grid-row: 2;

    margin: 0;

    color: #687680;

    font-size: .84rem;

    line-height: 1.4;
  }


  .hero ~ .experience-section {
    padding:
      2.2rem
      0 !important;
  }


  .experience-section .profile-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 1.35rem;

    padding: 0 !important;
  }


  .experience-section .profile-image {
    max-width: 345px;

    margin: 0 auto;

    padding:
      1rem
      1rem
      0;

    background:
      radial-gradient(
        circle at 50% 32%,
        #fff,
        #e9f2f7
      );

    border:
      1px solid var(--v5-line);

    border-radius: 19px;

    box-shadow:
      0 12px 28px rgba(13,47,69,.07);
  }


  .experience-section
  .profile-image img {
    display: block;

    width: auto;

    max-width: 100%;

    margin: 0 auto;
  }


  .hero ~ .insights-section {
    padding:
      2.15rem
      0 !important;
  }


  .insights-section .section-head {
    display: block;
  }


  .hero ~ .cta-section {
    padding:
      1.85rem
      0 !important;
  }


  .site-footer {
    padding:
      2.15rem
      0
      1rem;
  }


  .site-footer .footer-top {
    grid-template-columns: 1fr;

    gap: 1.7rem;
  }


  .site-footer .footer-brand {
    max-width: none;
  }


  .site-footer .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: .45rem;

    margin-top: 1.7rem;
  }

}


@media (max-width: 480px) {

  .hero-portrait {
    min-height: 255px;
  }


  .hero-portrait img {
    height: 255px;

    max-width: 82vw;
  }


  .hero-copy {
    padding-bottom: 1.65rem;
  }


  .hero + .services-section {
    padding:
      1.8rem
      0 !important;
  }


  .services-section .service-card {
    grid-template-columns:
      52px
      minmax(0,1fr);

    column-gap: .82rem;

    padding: .88rem;
  }


  .services-section .icon-box {
    width: 50px;
    height: 50px;

    border-radius: 12px;
  }


  .services-section
  .icon-box svg {
    width: 23px;
    height: 23px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .service-card,
  .social-link,
  .blog-card-media img,
  .btn {
    transition: none !important;
  }

}


/* ==========================================================
   MANCHEGO V5.1
   FINAL PREMIUM VISUAL POLISH
   ========================================================== */


/* ==========================================================
   HERO — DESKTOP
   ========================================================== */

@media (min-width: 1200px) {

  .hero-portrait {
    right:
      clamp(
        5rem,
        9vw,
        9.5rem
      );

    bottom: -10px;

    width:
      clamp(
        420px,
        30vw,
        475px
      );
  }


  .hero-portrait::before {
    content: "";

    display: block !important;

    position: absolute;

    z-index: 0;

    left: 50%;
    bottom: -4px;

    width: 88%;
    height: 78%;

    transform:
      translateX(-50%);

    background:
      radial-gradient(
        ellipse at 50% 80%,
        rgba(3,28,44,.38) 0%,
        rgba(11,86,144,.10) 44%,
        transparent 72%
      );

    filter:
      blur(7px);

    pointer-events: none;
  }


  .hero-portrait img {
    position: relative;

    z-index: 1;

    transform:
      scale(1.10);

    transform-origin:
      center bottom;

    filter:
      saturate(.92)
      contrast(1.025)
      brightness(.98)
      drop-shadow(
        0 8px 13px
        rgba(0,0,0,.15)
      );
  }

}


@media (min-width: 900px) and (max-width: 1199px) {

  .hero-portrait {
    right: 1.75rem;

    bottom: -7px;

    width:
      clamp(
        350px,
        36vw,
        400px
      );
  }


  .hero-portrait img {
    transform:
      scale(1.06);

    transform-origin:
      center bottom;
  }

}


/* ==========================================================
   SERVICES — PREMIUM CENTERED CARDS
   ========================================================== */

@media (min-width: 1100px) {

  .services-section
  .section-head h2 {
    max-width: 21ch;

    font-size:
      clamp(
        2.05rem,
        2.7vw,
        2.7rem
      );
  }


  .services-section
  .service-grid {
    gap: 16px;
  }


  .services-section
  .service-card {
    aspect-ratio:
      1.08 / 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
      1.35rem
      1.25rem;

    border:
      1px solid
      rgba(11,86,144,.13);

    border-radius: 18px;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 100%
      );

    box-shadow:
      0 10px 26px
      rgba(15,48,69,.055);
  }


  .services-section
  .service-card::before {
    height: 2px;

    opacity: .75;
  }


  .services-section
  .icon-box {
    width: 70px;

    height: 70px;

    margin:
      0
      auto
      1.05rem;

    border-radius: 18px;

    box-shadow:
      0 11px 24px
      rgba(11,86,144,.23);
  }


  .services-section
  .icon-box svg {
    width: 31px;

    height: 31px;
  }


  .services-section
  .service-card h3 {
    max-width: 23ch;

    margin:
      0
      auto
      .5rem;

    font-size: 1.02rem;

    line-height: 1.22;

    text-align: center;
  }


  .services-section
  .service-card p {
    max-width: 26ch;

    margin:
      0
      auto;

    font-size: .88rem;

    line-height: 1.46;

    text-align: center;
  }


  .services-section
  .actions {
    justify-content: center;

    margin-top: 1.35rem;
  }

}


/* ==========================================================
   EXPERIENCE
   ========================================================== */

@media (min-width: 900px) {

  .experience-section
  .profile-grid {
    grid-template-columns:
      minmax(310px,.78fr)
      minmax(0,1.22fr);

    gap:
      clamp(
        2.7rem,
        5vw,
        5.2rem
      );
  }


  .experience-section
  .profile-image {
    min-height: 400px;

    padding:
      .4rem
      .5rem
      0;

    border-radius: 22px;
  }


  .experience-section
  .profile-image img {
    max-height: 410px;

    transform:
      scale(1.14);

    transform-origin:
      center bottom;
  }


  .experience-section h2 {
    max-width: 18ch;

    font-size:
      clamp(
        2.2rem,
        3vw,
        2.9rem
      );
  }

}


/* ==========================================================
   INSIGHTS / BLOG
   ========================================================== */

.insights-section
.blog-card {
  display: flex;

  flex-direction: column;

  height: 100%;
}


.insights-section
.blog-card-body {
  display: flex;

  flex-direction: column;

  flex: 1;

  padding:
    .95rem
    1rem
    1.05rem;
}


.insights-section
.blog-card h3 {
  display:
    -webkit-box;

  overflow: hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp: 3;

  min-height:
    3.65em;

  font-size: 1rem;

  line-height: 1.22;
}


.insights-section
.blog-card-body
> p:not(.blog-card-date) {
  display:
    -webkit-box;

  overflow: hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp: 2;

  margin-bottom: .75rem;
}


.insights-section
.blog-card .text-link {
  margin-top: auto;
}


/* ==========================================================
   CTA — USE WIDTH BETTER
   ========================================================== */

@media (min-width: 900px) {

  .cta-section
  .cta-band {
    display: grid;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    column-gap:
      3rem;

    align-items: center;

    padding:
      1.9rem
      2.2rem;
  }


  .cta-section
  .cta-band h2,
  .cta-section
  .cta-band > p {
    grid-column: 1;
  }


  .cta-section
  .cta-band .actions {
    grid-column: 2;

    grid-row:
      1 / span 2;

    align-self: center;

    margin: 0;
  }


  .cta-section
  .cta-band h2 {
    max-width: 22ch;

    margin-bottom: .45rem;
  }


  .cta-section
  .cta-band > p {
    max-width: 60ch;

    margin-bottom: 0;
  }

}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
  padding:
    2.4rem
    0
    .95rem;
}


.site-footer
.footer-top {
  gap:
    clamp(
      1.8rem,
      4vw,
      4rem
    );
}


.site-footer
.footer-bottom {
  margin-top: 1.6rem;
}


/* ==========================================================
   MOBILE HERO
   ========================================================== */

@media (max-width: 899px) {

  .brand-logo {
    width: 166px;
  }


  .hero-portrait {
    position: relative;

    min-height: 255px;

    padding-top: 0;

    overflow: hidden;
  }


  .hero-portrait::before {
    content: "";

    display: block !important;

    position: absolute;

    z-index: 0;

    left: 50%;
    bottom: 0;

    width: 78%;
    height: 74%;

    transform:
      translateX(-50%);

    background:
      radial-gradient(
        ellipse at 50% 85%,
        rgba(2,24,39,.35),
        rgba(11,86,144,.08) 52%,
        transparent 74%
      );

    pointer-events: none;
  }


  .hero-portrait::after {
    content: "";

    display: block !important;

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    background:
      linear-gradient(
        to top,
        rgba(3,20,33,.78),
        transparent
      );

    pointer-events: none;
  }


  .hero-portrait img {
    position: relative;

    z-index: 1;

    height: 285px;

    max-width: 84vw;

    transform:
      scale(1.11);

    transform-origin:
      center bottom;

    filter:
      saturate(.93)
      contrast(1.02)
      brightness(.98)
      drop-shadow(
        0 8px 12px
        rgba(0,0,0,.15)
      );
  }


  .hero-copy {
    padding:
      .95rem
      0
      1.7rem;
  }


  .hero-copy h1 {
    max-width: 13.5ch;

    font-size:
      clamp(
        2.1rem,
        9vw,
        2.85rem
      );

    line-height: .99;
  }


  /* Services:
     premium centered composition on mobile too. */

  .services-section
  .service-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;
  }


  .services-section
  .service-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-height: 148px;

    padding:
      1rem
      1.05rem;

    border-radius: 15px;
  }


  .services-section
  .icon-box {
    width: 58px;

    height: 58px;

    margin:
      0
      auto
      .8rem;

    border-radius: 15px;
  }


  .services-section
  .icon-box svg {
    width: 26px;

    height: 26px;
  }


  .services-section
  .service-card h3 {
    margin:
      0
      auto
      .3rem;

    text-align: center;
  }


  .services-section
  .service-card p {
    max-width: 32ch;

    margin:
      0
      auto;

    text-align: center;
  }


  .services-section
  .actions {
    justify-content: center;

    margin-top: 1rem;
  }


  /* Experience: enlarge Sara in portrait panel. */

  .experience-section
  .profile-image {
    overflow: hidden;

    padding:
      .35rem
      .4rem
      0;
  }


  .experience-section
  .profile-image img {
    transform:
      scale(1.14);

    transform-origin:
      center bottom;
  }


  /* CTA returns to natural stack. */

  .cta-section
  .cta-band {
    display: block;
  }


  .cta-section
  .cta-band .actions {
    margin-top: 1rem;
  }


  .site-footer {
    padding:
      2rem
      0
      .9rem;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hero-portrait {
    min-height: 238px;
  }


  .hero-portrait img {
    height: 265px;

    max-width: 86vw;
  }


  .hero-copy h1 {
    max-width: 13ch;

    font-size: 2.22rem;
  }


  .services-section
  .section-head h2 {
    max-width: 18ch;

    font-size: 2rem;
  }


  .services-section
  .service-card {
    min-height: 138px;

    padding:
      .9rem
      .95rem;
  }


  .services-section
  .icon-box {
    width: 54px;

    height: 54px;

    border-radius: 14px;
  }


  .services-section
  .icon-box svg {
    width: 24px;

    height: 24px;
  }

}


/* ==========================================================
   NET3MAX
   MANCHEGO CONSULTING
   V5.2 FINAL PREMIUM / DESIGN-LOCK CANDIDATE

   This block deliberately overrides accumulated historical
   V1-V5.1 spacing rules with an explicit final box model.
   ========================================================== */


/* ==========================================================
   FINAL GLOBAL RHYTHM
   ========================================================== */

.services-section,
.experience-section,
.insights-section,
.cta-section {
  margin: 0 !important;
}


/* ==========================================================
   HERO — FINAL BOX MODEL
   ========================================================== */

.hero {
  min-height: 500px !important;

  padding:
    0 !important;

  margin:
    0 !important;

  overflow: hidden;
}


.hero > .shell {
  min-height: 500px;

  padding-top:
    0 !important;

  padding-bottom:
    0 !important;
}


.hero-grid {
  min-height: 500px !important;

  padding:
    0 !important;

  margin:
    0 !important;

  align-items: center;
}


.hero-copy {
  padding:
    0 !important;

  margin:
    0 !important;
}


/* ----------------------------------------------------------
   Final desktop typography.
   Wider H1 = cleaner premium wrapping.
   ---------------------------------------------------------- */

@media (min-width: 1200px) {

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.04fr)
      minmax(340px, .82fr);

    gap:
      clamp(
        1.5rem,
        3vw,
        3rem
      );
  }


  .hero-copy {
    max-width: 670px;
  }


  .hero-copy h1 {
    max-width: 12.6ch;

    margin-bottom: .82rem;

    font-size:
      clamp(
        3rem,
        4.05vw,
        4.05rem
      );

    line-height: .96;
  }


  .hero-copy .lead {
    max-width: 41ch;

    margin-bottom: 1.12rem;
  }


  /* --------------------------------------------------------
     Sara:
     closer to central composition,
     but still clearly on right.
     -------------------------------------------------------- */

  .hero-portrait {
    right:
      clamp(
        9rem,
        14vw,
        16rem
      ) !important;

    bottom:
      -8px !important;

    width:
      clamp(
        405px,
        28.5vw,
        455px
      ) !important;

    min-height:
      0 !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    content:
      none !important;

    display:
      none !important;
  }


  .hero-portrait picture {
    display:
      block !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait img {
    display:
      block !important;

    width:
      100% !important;

    height:
      auto !important;

    max-width:
      none !important;

    max-height:
      none !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;

    transform:
      scale(1.035) !important;

    transform-origin:
      center bottom !important;

    filter:
      saturate(.94)
      contrast(1.02)
      brightness(.99)
      drop-shadow(
        0 8px 12px
        rgba(0,0,0,.14)
      ) !important;
  }

}


/* ----------------------------------------------------------
   Medium desktop / laptop.
   ---------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1199px) {

  .hero {
    min-height:
      480px !important;
  }


  .hero > .shell,
  .hero-grid {
    min-height:
      480px !important;
  }


  .hero-grid {
    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,.78fr);

    gap: 1.5rem;
  }


  .hero-copy {
    max-width: 590px;
  }


  .hero-copy h1 {
    max-width: 12ch;

    font-size:
      clamp(
        2.75rem,
        4.7vw,
        3.65rem
      );
  }


  .hero-portrait {
    right:
      clamp(
        3rem,
        8vw,
        6rem
      ) !important;

    bottom:
      -7px !important;

    width:
      clamp(
        340px,
        35vw,
        395px
      ) !important;

    padding:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    content:
      none !important;

    display:
      none !important;
  }


  .hero-portrait picture {
    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait img {
    transform:
      scale(1.03) !important;

    transform-origin:
      center bottom !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    filter:
      saturate(.94)
      contrast(1.02)
      drop-shadow(
        0 7px 11px
        rgba(0,0,0,.13)
      ) !important;
  }

}


/* ==========================================================
   SERVICES — FINAL PREMIUM DESKTOP
   ========================================================== */

.hero + .services-section {
  padding:
    42px
    0
    46px !important;

  margin:
    0 !important;
}


.hero + .services-section > .shell {
  transform:
    none !important;

  margin:
    0 auto !important;
}


@media (min-width: 1100px) {

  .services-section .section-head {
    grid-template-columns:
      minmax(0, 1.48fr)
      minmax(300px, .72fr) !important;

    column-gap:
      clamp(
        2.5rem,
        4.5vw,
        4.5rem
      ) !important;

    margin-bottom:
      1.45rem !important;
  }


  .services-section
  .section-head h2 {
    max-width:
      24ch !important;

    margin:
      0 !important;

    font-size:
      clamp(
        2rem,
        2.5vw,
        2.58rem
      ) !important;

    line-height:
      1.01 !important;

    letter-spacing:
      -.04em !important;
  }


  .services-section
  .section-head
  > p:not(.eyebrow) {
    max-width:
      42ch !important;

    margin:
      0
      0
      .12rem !important;
  }


  .services-section .service-grid {
    gap:
      15px !important;
  }


  .services-section .service-card {
    aspect-ratio:
      1.15 / 1 !important;

    min-height:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    padding:
      1.15rem
      1.15rem !important;

    border-radius:
      17px !important;

    border:
      1px solid
      rgba(11,86,144,.12) !important;

    box-shadow:
      0 8px 22px
      rgba(15,48,69,.05) !important;
  }


  .services-section
  .service-card::before {
    height:
      2px !important;

    opacity:
      .72;
  }


  .services-section .icon-box {
    width:
      68px !important;

    height:
      68px !important;

    flex:
      0 0 68px !important;

    display:
      grid !important;

    place-items:
      center !important;

    margin:
      0
      auto
      .95rem !important;

    border-radius:
      17px !important;

    box-shadow:
      0 10px 21px
      rgba(11,86,144,.20) !important;
  }


  .services-section
  .icon-box svg {
    width:
      30px !important;

    height:
      30px !important;
  }


  .services-section
  .service-card h3 {
    max-width:
      24ch !important;

    margin:
      0
      auto
      .42rem !important;

    font-size:
      1.01rem !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;
  }


  .services-section
  .service-card p {
    max-width:
      27ch !important;

    margin:
      0
      auto !important;

    font-size:
      .86rem !important;

    line-height:
      1.42 !important;

    text-align:
      center !important;
  }


  .services-section
  .service-card:hover {
    transform:
      translateY(-3px) !important;

    box-shadow:
      0 15px 30px
      rgba(15,48,69,.09) !important;
  }


  .services-section .actions {
    justify-content:
      center !important;

    margin-top:
      1.2rem !important;
  }

}


/* ==========================================================
   EXPERIENCE — FINAL RHYTHM
   ========================================================== */

.hero ~ .experience-section {
  padding:
    48px
    0 !important;
}


@media (min-width: 900px) {

  .experience-section .profile-grid {
    grid-template-columns:
      minmax(310px,.80fr)
      minmax(0,1.20fr) !important;

    gap:
      clamp(
        2.6rem,
        4.5vw,
        4.8rem
      ) !important;
  }


  .experience-section .profile-image {
    min-height:
      390px !important;

    padding:
      .35rem
      .45rem
      0 !important;
  }


  .experience-section
  .profile-image img {
    max-height:
      405px !important;

    transform:
      scale(1.10) !important;

    transform-origin:
      center bottom !important;
  }


  .experience-section h2 {
    max-width:
      19ch !important;

    font-size:
      clamp(
        2.15rem,
        2.85vw,
        2.75rem
      ) !important;

    line-height:
      1.03 !important;

    margin-bottom:
      .75rem !important;
  }


  .experience-section
  .fact-grid {
    margin-top:
      1.05rem !important;
  }

}


/* ==========================================================
   BLOG — LOCK CONTENT, FINAL SPACING ONLY
   ========================================================== */

.hero ~ .insights-section {
  padding:
    44px
    0
    46px !important;
}


.insights-section .section-head {
  margin-bottom:
    1.35rem !important;
}


.insights-section .blog-grid {
  gap:
    15px !important;
}


.insights-section .blog-card-body {
  padding:
    .9rem
    .95rem
    1rem !important;
}


/* ==========================================================
   CTA — KEEP EXECUTIVE LAYOUT, REMOVE EXTRA SECTION SPACE
   ========================================================== */

.hero ~ .cta-section {
  padding:
    34px
    0 !important;
}


@media (min-width: 900px) {

  .cta-section .cta-band {
    padding:
      1.7rem
      2.1rem !important;

    border-radius:
      18px !important;
  }

}


/* ==========================================================
   FOOTER — FINAL COMPACT CLOSE
   ========================================================== */

.site-footer {
  padding:
    34px
    0
    14px !important;
}


.site-footer .footer-top {
  gap:
    clamp(
      1.7rem,
      4vw,
      3.8rem
    ) !important;
}


.site-footer .footer-brand p {
  margin-bottom:
    .8rem !important;
}


.site-footer .footer-nav {
  gap:
    .48rem !important;
}


.site-footer .footer-bottom {
  margin-top:
    1.35rem !important;

  padding-top:
    .85rem !important;
}


/* ==========================================================
   MOBILE FINAL
   ========================================================== */

@media (max-width: 899px) {

  /* --------------------------------------------------------
     Kill all inherited Hero padding on mobile too.
     -------------------------------------------------------- */

  .hero {
    min-height:
      0 !important;

    padding:
      0 !important;

    margin:
      0 !important;
  }


  .hero > .shell,
  .hero-grid {
    min-height:
      0 !important;

    padding-top:
      0 !important;

    padding-bottom:
      0 !important;
  }


  .hero-grid {
    display:
      flex !important;

    flex-direction:
      column !important;
  }


  /* --------------------------------------------------------
     No rectangular portrait/card artifact.
     -------------------------------------------------------- */

  .hero-portrait {
    order:
      1;

    position:
      relative !important;

    width:
      100% !important;

    min-height:
      250px !important;

    right:
      auto !important;

    bottom:
      auto !important;

    padding:
      0 !important;

    margin:
      0 !important;

    display:
      flex !important;

    align-items:
      flex-end !important;

    justify-content:
      center !important;

    overflow:
      hidden !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait::before,
  .hero-portrait::after {
    content:
      none !important;

    display:
      none !important;
  }


  .hero-portrait picture {
    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait img {
    display:
      block !important;

    width:
      auto !important;

    height:
      278px !important;

    max-width:
      84vw !important;

    max-height:
      none !important;

    margin:
      0 auto !important;

    padding:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;

    transform:
      scale(1.04) !important;

    transform-origin:
      center bottom !important;

    filter:
      saturate(.94)
      contrast(1.02)
      drop-shadow(
        0 6px 10px
        rgba(0,0,0,.13)
      ) !important;
  }


  .hero-copy {
    order:
      2;

    padding:
      .95rem
      0
      1.6rem !important;

    margin:
      0 !important;
  }


  .hero-copy .eyebrow {
    margin-bottom:
      .46rem !important;
  }


  .hero-copy h1 {
    max-width:
      13.8ch !important;

    margin-bottom:
      .62rem !important;

    font-size:
      clamp(
        2.05rem,
        8.7vw,
        2.75rem
      ) !important;

    line-height:
      .99 !important;
  }


  .hero-copy .lead {
    margin-bottom:
      .88rem !important;
  }


  /* --------------------------------------------------------
     Mobile services.
     Keep centered premium concept but reduce height.
     -------------------------------------------------------- */

  .hero + .services-section {
    padding:
      30px
      0
      34px !important;
  }


  .services-section
  .section-head {
    margin-bottom:
      1rem !important;
  }


  .services-section
  .section-head h2 {
    max-width:
      18ch !important;

    font-size:
      clamp(
        1.9rem,
        7.4vw,
        2.35rem
      ) !important;

    line-height:
      1.03 !important;
  }


  .services-section
  .service-grid {
    gap:
      9px !important;
  }


  .services-section
  .service-card {
    min-height:
      130px !important;

    aspect-ratio:
      auto !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    padding:
      .82rem
      .9rem !important;

    border-radius:
      14px !important;
  }


  .services-section
  .icon-box {
    width:
      54px !important;

    height:
      54px !important;

    flex:
      0 0 54px !important;

    margin:
      0
      auto
      .65rem !important;

    border-radius:
      14px !important;
  }


  .services-section
  .icon-box svg {
    width:
      24px !important;

    height:
      24px !important;
  }


  .services-section
  .service-card h3 {
    margin:
      0
      auto
      .25rem !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;
  }


  .services-section
  .service-card p {
    max-width:
      33ch !important;

    margin:
      0
      auto !important;

    line-height:
      1.36 !important;

    text-align:
      center !important;
  }


  .services-section .actions {
    margin-top:
      .9rem !important;

    justify-content:
      center !important;
  }


  /* Experience */

  .hero ~ .experience-section {
    padding:
      34px
      0 !important;
  }


  .experience-section
  .profile-grid {
    gap:
      1.15rem !important;
  }


  .experience-section
  .profile-image {
    padding:
      .3rem
      .35rem
      0 !important;
  }


  .experience-section
  .profile-image img {
    transform:
      scale(1.08) !important;

    transform-origin:
      center bottom !important;
  }


  /* Blog */

  .hero ~ .insights-section {
    padding:
      32px
      0
      34px !important;
  }


  /* CTA */

  .hero ~ .cta-section {
    padding:
      27px
      0 !important;
  }


  /* Footer */

  .site-footer {
    padding:
      30px
      0
      13px !important;
  }


  .site-footer .footer-top {
    gap:
      1.45rem !important;
  }


  .site-footer .footer-bottom {
    margin-top:
      1.35rem !important;

    padding-top:
      .8rem !important;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hero-portrait {
    min-height:
      230px !important;
  }


  .hero-portrait img {
    height:
      252px !important;

    max-width:
      86vw !important;
  }


  .hero-copy {
    padding:
      .82rem
      0
      1.45rem !important;
  }


  .hero-copy h1 {
    max-width:
      13.5ch !important;

    font-size:
      2.1rem !important;
  }


  .hero + .services-section {
    padding:
      27px
      0
      30px !important;
  }


  .services-section
  .service-card {
    min-height:
      122px !important;

    padding:
      .78rem
      .85rem !important;
  }


  .services-section
  .icon-box {
    width:
      50px !important;

    height:
      50px !important;

    flex-basis:
      50px !important;

    margin-bottom:
      .55rem !important;
  }


  .services-section
  .icon-box svg {
    width:
      23px !important;

    height:
      23px !important;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .service-card,
  .blog-card-media img,
  .social-link,
  .btn {
    transition:
      none !important;
  }

}


/* ==========================================================
   NET3MAX — MANCHEGO CONSULTING
   V5.3 FINAL PREMIUM CONSISTENCY

   FIX 1:
   V5.2 correctly removed vertical Hero padding, but its
   .hero-grid margin:0 also defeated the centering inherited
   from .shell. Restore horizontal auto margins only.

   FIX 2:
   Premium Services rules were homepage-scoped.
   Give the dedicated Services page the same visual language.
   ========================================================== */


/* ==========================================================
   HOME HERO — RESTORE SHELL HORIZONTAL ALIGNMENT
   ========================================================== */

.hero > .shell.hero-grid {
  margin-top:
    0 !important;

  margin-bottom:
    0 !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/*
 * Do NOT reintroduce vertical padding.
 * V5.2 500px desktop box remains authoritative.
 */

.hero-copy {
  margin-left:
    0 !important;

  margin-right:
    0 !important;
}


/* ==========================================================
   INTERNAL SERVICES PAGE — INTRO
   ========================================================== */

.services-page > section:first-of-type {
  padding-top:
    clamp(
      2.1rem,
      3.2vw,
      3.2rem
    ) !important;

  padding-bottom:
    clamp(
      2rem,
      2.8vw,
      2.8rem
    ) !important;
}


.services-page
> section:first-of-type h1 {
  max-width:
    18ch;

  margin-bottom:
    .85rem;

  font-size:
    clamp(
      3rem,
      4.1vw,
      4.6rem
    );

  line-height:
    1.02;

  letter-spacing:
    -.045em;
}


.services-page
> section:first-of-type p {
  max-width:
    58ch;

  margin-bottom:
    0;
}


/* ==========================================================
   INTERNAL SERVICES — DESKTOP TRUE SQUARE GRID
   ========================================================== */

@media (min-width: 1100px) {

  .services-page .service-grid {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;

    gap:
      16px !important;

    width:
      100%;

    max-width:
      1248px;

    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  .services-page .service-card {
    aspect-ratio:
      1 / 1 !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      0 !important;

    padding:
      1.45rem
      1.35rem !important;

    text-align:
      center !important;

    background:
      linear-gradient(
        180deg,
        #fff 0%,
        #fbfdff 100%
      ) !important;

    border:
      1px solid
      rgba(11,86,144,.13) !important;

    border-radius:
      18px !important;

    box-shadow:
      0 10px 27px
      rgba(15,48,69,.055) !important;

    overflow:
      hidden;

    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }


  .services-page
  .service-card::before {
    height:
      2px !important;

    opacity:
      .75;
  }


  .services-page .icon-box {
    flex:
      0 0 70px !important;

    width:
      70px !important;

    height:
      70px !important;

    display:
      grid !important;

    place-items:
      center !important;

    margin:
      0
      auto
      1.05rem !important;

    color:
      #fff !important;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      ) !important;

    border:
      0 !important;

    border-radius:
      18px !important;

    box-shadow:
      0 11px 24px
      rgba(11,86,144,.22) !important;
  }


  .services-page
  .icon-box svg {
    width:
      31px !important;

    height:
      31px !important;
  }


  .services-page
  .service-card h3 {
    max-width:
      23ch;

    margin:
      0
      auto
      .5rem !important;

    color:
      #071724 !important;

    font-size:
      1.04rem !important;

    line-height:
      1.22 !important;

    letter-spacing:
      -.014em;

    text-align:
      center !important;
  }


  .services-page
  .service-card p {
    max-width:
      27ch;

    margin:
      0
      auto !important;

    color:
      #65747f !important;

    font-size:
      .89rem !important;

    line-height:
      1.46 !important;

    text-align:
      center !important;
  }


  .services-page
  .service-card:hover {
    transform:
      translateY(-4px) !important;

    border-color:
      rgba(11,86,144,.30) !important;

    box-shadow:
      0 18px 36px
      rgba(15,48,69,.095) !important;
  }

}


/* ==========================================================
   SERVICES — TABLET
   ========================================================== */

@media (min-width: 700px) and (max-width: 1099px) {

  .services-page .service-grid {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      14px !important;

    max-width:
      760px;

    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  .services-page .service-card {
    aspect-ratio:
      1.08 / 1 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    padding:
      1.25rem !important;

    text-align:
      center !important;

    border-radius:
      17px !important;
  }


  .services-page .icon-box {
    width:
      64px !important;

    height:
      64px !important;

    flex:
      0 0 64px !important;

    margin:
      0
      auto
      .9rem !important;

    display:
      grid !important;

    place-items:
      center !important;

    color:
      #fff !important;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      ) !important;

    border:
      0 !important;

    border-radius:
      16px !important;
  }


  .services-page
  .service-card h3,
  .services-page
  .service-card p {
    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;
  }

}


/* ==========================================================
   MOBILE — KEEP PREMIUM, DON'T FORCE 8 LARGE SQUARES
   ========================================================== */

@media (max-width: 699px) {

  /*
   * Restore the horizontal shell gutter lost through
   * V5.2 margin:0, while retaining zero vertical Hero padding.
   */

  .hero > .shell.hero-grid {
    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  .services-page
  > section:first-of-type {
    padding-top:
      1.8rem !important;

    padding-bottom:
      1.7rem !important;
  }


  .services-page
  > section:first-of-type h1 {
    max-width:
      15ch;

    font-size:
      clamp(
        2.15rem,
        10vw,
        2.8rem
      );

    line-height:
      1.02;
  }


  .services-page .service-grid {
    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      10px !important;
  }


  .services-page .service-card {
    aspect-ratio:
      auto !important;

    min-height:
      138px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    padding:
      .95rem
      1rem !important;

    text-align:
      center !important;

    border-radius:
      15px !important;
  }


  .services-page .icon-box {
    width:
      56px !important;

    height:
      56px !important;

    flex:
      0 0 56px !important;

    display:
      grid !important;

    place-items:
      center !important;

    margin:
      0
      auto
      .7rem !important;

    color:
      #fff !important;

    background:
      linear-gradient(
        145deg,
        #0b5690,
        #267db6
      ) !important;

    border:
      0 !important;

    border-radius:
      14px !important;
  }


  .services-page
  .icon-box svg {
    width:
      25px !important;

    height:
      25px !important;
  }


  .services-page
  .service-card h3 {
    max-width:
      28ch;

    margin:
      0
      auto
      .28rem !important;

    text-align:
      center !important;
  }


  .services-page
  .service-card p {
    max-width:
      34ch;

    margin:
      0
      auto !important;

    line-height:
      1.4 !important;

    text-align:
      center !important;
  }

}


@media (prefers-reduced-motion: reduce) {

  .services-page .service-card {
    transition:
      none !important;
  }

}


/* ==========================================================
   NET3MAX — MANCHEGO CONSULTING
   V5.4 FINAL HERO COMPOSITION
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   More useful copy width; Sara remains proven/locked.
   ========================================================== */

@media (min-width: 1200px) {

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(330px, .82fr)
      !important;

    column-gap:
      clamp(
        1.5rem,
        2.4vw,
        2.6rem
      ) !important;
  }


  .hero-copy {
    width:
      100% !important;

    max-width:
      750px !important;
  }


  .hero-copy h1 {
    width:
      100% !important;

    max-width:
      720px !important;

    margin-bottom:
      .82rem !important;

    font-size:
      clamp(
        3.05rem,
        3.85vw,
        4rem
      ) !important;

    line-height:
      .96 !important;

    letter-spacing:
      -.052em !important;
  }


  .hero-copy .lead {
    max-width:
      44ch !important;

    margin-bottom:
      1.08rem !important;
  }

}


/* ==========================================================
   LAPTOP / MEDIUM DESKTOP
   Still wider than V5.3, but avoids collision with Sara.
   ========================================================== */

@media (min-width: 900px) and (max-width: 1199px) {

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.10fr)
      minmax(300px, .80fr)
      !important;

    column-gap:
      1.4rem !important;
  }


  .hero-copy {
    width:
      100% !important;

    max-width:
      640px !important;
  }


  .hero-copy h1 {
    width:
      100% !important;

    max-width:
      620px !important;

    font-size:
      clamp(
        2.7rem,
        4.4vw,
        3.55rem
      ) !important;

    line-height:
      .97 !important;
  }

}


/* ==========================================================
   MOBILE
   FINAL HIERARCHY:
   VALUE PROPOSITION -> CTA -> SARA
   ========================================================== */

@media (max-width: 899px) {

  .hero-grid {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      0 !important;
  }


  /* -----------------------------------------------
     COPY FIRST
     ----------------------------------------------- */

  .hero-copy {
    order:
      1 !important;

    width:
      100% !important;

    max-width:
      none !important;

    padding:
      1.2rem
      0
      .95rem !important;

    margin:
      0 !important;
  }


  .hero-copy .eyebrow {
    margin-bottom:
      .48rem !important;
  }


  .hero-copy h1 {
    width:
      100% !important;

    max-width:
      14ch !important;

    margin:
      0
      0
      .65rem !important;

    font-size:
      clamp(
        2.05rem,
        8.6vw,
        2.65rem
      ) !important;

    line-height:
      .98 !important;

    letter-spacing:
      -.045em !important;
  }


  .hero-copy .lead {
    max-width:
      34ch !important;

    margin:
      0
      0
      .9rem !important;

    font-size:
      .94rem !important;

    line-height:
      1.45 !important;
  }


  .hero-actions {
    margin:
      0 !important;

    gap:
      .75rem !important;
  }


  /* -----------------------------------------------
     SARA SECOND
     ----------------------------------------------- */

  .hero-portrait {
    order:
      2 !important;

    position:
      relative !important;

    width:
      100% !important;

    min-height:
      235px !important;

    right:
      auto !important;

    bottom:
      auto !important;

    display:
      flex !important;

    align-items:
      flex-end !important;

    justify-content:
      center !important;

    padding:
      0 !important;

    margin:
      0 !important;

    overflow:
      hidden !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait picture {
    display:
      block !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  .hero-portrait img {
    display:
      block !important;

    width:
      auto !important;

    height:
      252px !important;

    max-width:
      83vw !important;

    max-height:
      none !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;

    transform:
      none !important;

    background:
      transparent !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    filter:
      saturate(.94)
      contrast(1.02)
      drop-shadow(
        0 6px 10px
        rgba(0,0,0,.13)
      ) !important;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hero-copy {
    padding:
      1.05rem
      0
      .8rem !important;
  }


  .hero-copy h1 {
    max-width:
      13.5ch !important;

    font-size:
      2.08rem !important;
  }


  .hero-copy .lead {
    font-size:
      .9rem !important;
  }


  .hero-portrait {
    min-height:
      220px !important;
  }


  .hero-portrait img {
    height:
      238px !important;

    max-width:
      85vw !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.4.1 R1 — FINAL MOBILE SARA SCALE

   Desktop unchanged.
   Mobile hierarchy unchanged: TEXT -> CTA -> SARA.
   Only portrait dimensions are increased.
   ========================================================== */


/* Phones / tablets below desktop breakpoint */

@media (max-width: 899px) {

  .hero-portrait {
    min-height:
      258px !important;
  }


  .hero-portrait img {
    height:
      286px !important;

    max-width:
      88vw !important;

    transform:
      none !important;

    transform-origin:
      center bottom !important;
  }

}


/* Normal phones */

@media (max-width: 480px) {

  .hero-portrait {
    min-height:
      250px !important;
  }


  .hero-portrait img {
    height:
      272px !important;

    max-width:
      89vw !important;
  }

}


/* Exact narrow-phone class, including 360px QA */

@media (max-width: 360px) {

  .hero-portrait {
    min-height:
      248px !important;
  }


  .hero-portrait img {
    height:
      268px !important;

    max-width:
      90vw !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.4.2 — FINAL MOBILE SARA EMPHASIS

   Desktop untouched.
   Mobile order untouched:
   TEXT -> CTA -> SARA.

   Only Sara portrait dimensions change.
   ========================================================== */


/* Large phones / small tablets */

@media (max-width: 899px) {

  .hero-portrait {
    min-height:
      310px !important;
  }


  .hero-portrait img {
    width:
      auto !important;

    height:
      340px !important;

    max-width:
      92vw !important;

    max-height:
      none !important;

    margin:
      0 auto !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;

    transform:
      none !important;

    transform-origin:
      center bottom !important;
  }

}


/* Normal mobile phones */

@media (max-width: 480px) {

  .hero-portrait {
    min-height:
      298px !important;
  }


  .hero-portrait img {
    height:
      325px !important;

    max-width:
      94vw !important;
  }

}


/* Exact narrow-phone QA class, including 360px */

@media (max-width: 360px) {

  .hero-portrait {
    min-height:
      294px !important;
  }


  .hero-portrait img {
    height:
      320px !important;

    max-width:
      95vw !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.4.3 — FINAL MOBILE VERTICAL INTEGRATION

   Sara dimensions remain exactly as V5.4.2.

   Only the portrait block is pulled upward to remove the
   excessive visual void between CTA and Sara's head.
   ========================================================== */


/* Large mobile / small tablet */

@media (max-width: 899px) {

  .hero-portrait {
    margin-top:
      -34px !important;

    margin-bottom:
      0 !important;
  }

}


/* Typical mobile */

@media (max-width: 480px) {

  .hero-portrait {
    margin-top:
      -44px !important;
  }

}


/* Narrow mobile / exact 360px QA */

@media (max-width: 360px) {

  .hero-portrait {
    margin-top:
      -52px !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5 — PREMIUM FULL-WIDTH MOBILE MENU

   RH-style concept:
   - strong white sheet
   - clear icon navigation
   - large touch targets
   - full-width CTA

   Manchego execution:
   - brand blue
   - full viewport width
   - existing accessibility behavior preserved
   ========================================================== */


@media (max-width: 899px) {

  :root {
    --mc-mobile-header-h:
      clamp(
        66px,
        18vw,
        74px
      );
  }


  /* --------------------------------------------------------
     OVERLAY

     Keep visible site header above the white menu sheet.
     The backdrop begins visually below the header.
     -------------------------------------------------------- */

  .mobile-overlay[hidden] {
    display:
      none !important;
  }


  .mobile-overlay {
    position:
      fixed !important;

    inset:
      0 !important;

    z-index:
      500 !important;

    display:
      block !important;

    padding:
      var(--mc-mobile-header-h)
      0
      0 !important;

    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0)
          0,
        rgba(0,0,0,0)
          var(--mc-mobile-header-h),
        rgba(2,18,30,.52)
          var(--mc-mobile-header-h),
        rgba(2,18,30,.58)
          100%
      ) !important;

    backdrop-filter:
      none !important;

    overflow:
      hidden !important;
  }


  /* --------------------------------------------------------
     PANEL — FULL SCREEN WIDTH
     -------------------------------------------------------- */

  .mobile-panel {
    position:
      relative !important;

    inset:
      auto !important;

    width:
      100vw !important;

    max-width:
      none !important;

    height:
      auto !important;

    max-height:
      calc(
        100dvh
        - var(--mc-mobile-header-h)
        - 12px
      ) !important;

    margin:
      0 !important;

    padding:
      12px
      max(
        20px,
        env(safe-area-inset-right)
      )
      22px
      max(
        20px,
        env(safe-area-inset-left)
      ) !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain;

    background:
      #ffffff !important;

    border:
      0 !important;

    border-radius:
      0
      0
      26px
      26px !important;

    box-shadow:
      0
      18px
      45px
      rgba(3,25,40,.24) !important;

    transform:
      none !important;
  }


  /* --------------------------------------------------------
     PANEL HEAD / EXPLICIT CLOSE
     -------------------------------------------------------- */

  .mobile-panel-head {
    min-height:
      46px;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      1rem;

    padding:
      0
      2px
      6px
      8px !important;

    margin:
      0 !important;

    border:
      0 !important;
  }


  .mobile-panel-head strong {
    color:
      #65747f;

    font-size:
      .72rem;

    font-weight:
      800;

    letter-spacing:
      .13em;

    line-height:
      1;

    text-transform:
      uppercase;
  }


  .menu-close {
    width:
      42px !important;

    height:
      42px !important;

    min-width:
      42px !important;

    display:
      grid !important;

    place-items:
      center !important;

    padding:
      0 !important;

    color:
      #071724 !important;

    background:
      #f7f9fb !important;

    border:
      1px solid
      #d9e2e8 !important;

    border-radius:
      13px !important;

    box-shadow:
      none !important;
  }


  .menu-close svg {
    width:
      22px !important;

    height:
      22px !important;
  }


  /* --------------------------------------------------------
     NAV
     -------------------------------------------------------- */

  .mobile-nav {
    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    max-width:
      none !important;

    height:
      auto !important;

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      3px !important;

    padding:
      2px
      0
      0 !important;

    margin:
      0 !important;

    overflow:
      visible !important;

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;

    transform:
      none !important;
  }


  .mobile-nav-item {
    min-height:
      58px;

    display:
      grid !important;

    grid-template-columns:
      34px
      minmax(0,1fr);

    align-items:
      center;

    column-gap:
      12px;

    padding:
      0
      12px !important;

    margin:
      0 !important;

    color:
      #25313a !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      14px !important;

    font-size:
      1.03rem !important;

    font-weight:
      720 !important;

    line-height:
      1.2 !important;

    text-decoration:
      none !important;

    box-shadow:
      none !important;
  }


  .mobile-nav-item:hover,
  .mobile-nav-item:focus-visible {
    color:
      #0b5690 !important;

    background:
      #f3f8fc !important;
  }


  .mobile-nav-item[aria-current="page"] {
    color:
      #0b5690 !important;

    background:
      #edf5fa !important;
  }


  .mobile-nav-icon {
    width:
      30px;

    height:
      30px;

    display:
      grid;

    place-items:
      center;

    color:
      #6a7881;
  }


  .mobile-nav-item[aria-current="page"]
  .mobile-nav-icon {
    color:
      #0b5690;
  }


  .mobile-nav-icon svg {
    width:
      24px;

    height:
      24px;

    display:
      block;
  }


  .mobile-nav-label {
    display:
      block;

    min-width:
      0;
  }


  /* --------------------------------------------------------
     WHATSAPP CTA
     -------------------------------------------------------- */

  .mobile-nav-cta {
    min-height:
      58px;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      center;

    gap:
      11px;

    width:
      100% !important;

    margin:
      13px
      0
      0 !important;

    padding:
      .9rem
      1.1rem !important;

    color:
      #ffffff !important;

    background:
      linear-gradient(
        135deg,
        #0b5690,
        #1875ad
      ) !important;

    border:
      0 !important;

    border-radius:
      999px !important;

    font-size:
      1.05rem !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    text-align:
      center;

    text-decoration:
      none !important;

    box-shadow:
      0
      13px
      26px
      rgba(11,86,144,.24) !important;
  }


  .mobile-nav-cta:hover,
  .mobile-nav-cta:focus-visible {
    color:
      #ffffff !important;

    background:
      linear-gradient(
        135deg,
        #094d81,
        #126a9f
      ) !important;

    transform:
      translateY(-1px);
  }


  .mobile-nav-cta-icon {
    width:
      27px;

    height:
      27px;

    display:
      grid;

    place-items:
      center;

    flex:
      0
      0 27px;
  }


  .mobile-nav-cta-icon svg {
    width:
      26px;

    height:
      26px;

    display:
      block;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 380px) {

  .mobile-panel {
    padding-left:
      16px !important;

    padding-right:
      16px !important;

    padding-bottom:
      18px !important;
  }


  .mobile-nav-item {
    min-height:
      54px;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

    font-size:
      .98rem !important;
  }


  .mobile-nav-cta {
    min-height:
      56px;

    margin-top:
      10px !important;
  }

}


/* ==========================================================
   DESKTOP — MOBILE SHEET MUST NEVER PARTICIPATE
   ========================================================== */

@media (min-width: 900px) {

  .mobile-overlay {
    display:
      none !important;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .mobile-nav-item,
  .mobile-nav-cta,
  .menu-close {
    transition:
      none !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5.1 R1

   A. WhatsApp brand treatment
   B. Larger Sara on Sobre nosotros
   ========================================================== */


/* ----------------------------------------------------------
   A. WHATSAPP — RECOGNIZABLE BRAND TREATMENT
   ---------------------------------------------------------- */

@media (max-width: 899px) {

  .mobile-nav-cta {
    gap:
      13px !important;
  }


  .mobile-nav-cta-icon.whatsapp-brand-icon {
    width:
      34px !important;

    height:
      34px !important;

    flex:
      0 0 34px !important;

    display:
      grid !important;

    place-items:
      center !important;

    padding:
      6px !important;

    color:
      #ffffff !important;

    background:
      #25D366 !important;

    border-radius:
      50% !important;

    box-shadow:
      0
      4px
      12px
      rgba(0,0,0,.14) !important;
  }


  .mobile-nav-cta-icon.whatsapp-brand-icon svg {
    width:
      22px !important;

    height:
      22px !important;

    display:
      block !important;
  }

}


/* ----------------------------------------------------------
   B. SOBRE NOSOTROS — PROFILE EMPHASIS

   The source itself is only 433px wide.
   Never intentionally exceed 433px.
   ---------------------------------------------------------- */

.conocenos-page .profile-image {
  display:
    grid !important;

  place-items:
    end center !important;

  width:
    100% !important;

  overflow:
    hidden !important;

  padding:
    .6rem
    .6rem
    0 !important;
}


.conocenos-page .profile-image img {
  display:
    block !important;

  width:
    min(100%, 433px) !important;

  max-width:
    433px !important;

  height:
    auto !important;

  max-height:
    none !important;

  margin:
    0 auto !important;

  object-fit:
    contain !important;

  object-position:
    center bottom !important;

  transform:
    none !important;
}


/* Tablet/mobile */

@media (max-width: 899px) {

  .conocenos-page .profile-image {
    min-height:
      0 !important;

    padding:
      .4rem
      .25rem
      0 !important;

    border-radius:
      22px !important;
  }


  .conocenos-page .profile-image img {
    width:
      min(100%, 390px) !important;

    max-width:
      390px !important;
  }

}


/* Normal phones */

@media (max-width: 480px) {

  .conocenos-page .profile-image {
    padding:
      .2rem
      0
      0 !important;
  }


  .conocenos-page .profile-image img {
    width:
      min(98%, 350px) !important;

    max-width:
      350px !important;
  }

}


/* Exact 360px QA */

@media (max-width: 360px) {

  .conocenos-page .profile-image img {
    width:
      min(98%, 332px) !important;

    max-width:
      332px !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5.2 — FINAL MOBILE ALIGNMENT

   1. monochrome WhatsApp mark
   2. narrower centered WhatsApp CTA
   3. geometrically centered About portrait
   ========================================================== */


/* ==========================================================
   MOBILE MENU CTA
   ========================================================== */

@media (max-width: 899px) {

  /*
   * Keep the recognizable WhatsApp SVG,
   * but integrate it into Manchego's visual identity.
   */

  .mobile-nav-cta-icon.whatsapp-brand-icon {
    width:
      30px !important;

    height:
      30px !important;

    flex:
      0 0 30px !important;

    display:
      grid !important;

    place-items:
      center !important;

    padding:
      0 !important;

    color:
      #ffffff !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;
  }


  .mobile-nav-cta-icon.whatsapp-brand-icon svg {
    width:
      29px !important;

    height:
      29px !important;

    display:
      block !important;

    color:
      #ffffff !important;

    fill:
      currentColor !important;
  }


  /*
   * CTA must remain prominent but not span nearly
   * the complete viewport.
   */

  .mobile-nav-cta {
    width:
      min(82vw, 360px) !important;

    max-width:
      360px !important;

    min-height:
      58px !important;

    margin:
      13px
      auto
      0 !important;

    padding:
      .9rem
      1.3rem !important;

    justify-self:
      center !important;

    align-self:
      center !important;
  }

}


/* Narrow phones */

@media (max-width: 380px) {

  .mobile-nav-cta {
    width:
      82vw !important;

    min-height:
      56px !important;

    margin-top:
      10px !important;
  }

}


/* ==========================================================
   SOBRE NOSOTROS
   TRUE GEOMETRIC MOBILE CENTERING
   ========================================================== */

@media (max-width: 899px) {

  /*
   * Collapse any inherited desktop grid geometry.
   */

  .conocenos-page .profile-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    justify-items:
      stretch !important;

    align-items:
      start !important;

    width:
      100% !important;

    max-width:
      100% !important;
  }


  /*
   * The FIGURE itself must occupy the complete available
   * width before its image can actually be centered.
   */

  .conocenos-page figure.profile-image,
  .conocenos-page .profile-image {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    justify-self:
      stretch !important;

    align-self:
      start !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    justify-content:
      flex-end !important;

    align-items:
      center !important;

    box-sizing:
      border-box !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;

    overflow:
      hidden !important;
  }


  /*
   * Preserve V5.5.1 size.
   * Only alignment changes.
   */

  .conocenos-page .profile-image img {
    display:
      block !important;

    flex:
      0 0 auto !important;

    width:
      min(100%, 390px) !important;

    max-width:
      390px !important;

    height:
      auto !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    position:
      static !important;

    left:
      auto !important;

    right:
      auto !important;

    inset:
      auto !important;

    transform:
      none !important;

    object-fit:
      contain !important;

    object-position:
      center bottom !important;
  }

}


/* Normal phones */

@media (max-width: 480px) {

  .conocenos-page .profile-image img {
    width:
      min(98%, 350px) !important;

    max-width:
      350px !important;
  }

}


/* Exact 360px QA */

@media (max-width: 360px) {

  .conocenos-page .profile-image img {
    width:
      min(98%, 332px) !important;

    max-width:
      332px !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5.3 — FINAL ABOUT-PAGE POLISH

   1. sharper premium introduction text
   2. consistent profile-card mobile gutters
   ========================================================== */


/* ----------------------------------------------------------
   INTRODUCTION COPY

   Deep slate:
   stronger than previous gray,
   softer and more premium than pure black.
   ---------------------------------------------------------- */

.conocenos-page .about-intro-copy {
  color:
    #344956 !important;

  opacity:
    1 !important;

  font-weight:
    500 !important;

  letter-spacing:
    -.008em;

  text-shadow:
    none !important;
}


/* ----------------------------------------------------------
   MOBILE PROFILE CARD GUTTERS

   V5.5.2 intentionally forced profile-grid to 100%.
   That solved geometric centering but made the card visually
   too close to the viewport edges.

   Keep centering, restore premium page gutters.
   ---------------------------------------------------------- */

@media (max-width: 899px) {

  .conocenos-page .profile-grid {
    width:
      calc(100% - 40px) !important;

    max-width:
      720px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    justify-self:
      center !important;

    box-sizing:
      border-box !important;
  }


  .conocenos-page .about-intro-copy {
    line-height:
      1.58 !important;
  }

}


/* Narrow phones: preserve usable content width */

@media (max-width: 380px) {

  .conocenos-page .profile-grid {
    width:
      calc(100% - 36px) !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5.4 R1 — ABOUT LABEL HIERARCHY / DESIGN LOCK

   Scoped ONLY to:
   - Sara Manchego Odar
   - Misión
   - Visión
   ========================================================== */


.conocenos-page .about-label {
  color:
    #0b5690 !important;

  opacity:
    1 !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    .075em !important;

  text-transform:
    uppercase !important;

  text-shadow:
    none !important;
}


/* Sara identity:
   strongest of the three small blue labels */

.conocenos-page .about-label-person {
  font-size:
    1.125rem !important;

  margin-bottom:
    .78rem !important;
}


/* Mission + Vision */

.conocenos-page .about-label-section {
  font-size:
    1.05rem !important;

  margin-bottom:
    .6rem !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 899px) {

  .conocenos-page .about-label-person {
    font-size:
      1.06rem !important;

    letter-spacing:
      .07em !important;

    margin-bottom:
      .72rem !important;
  }


  .conocenos-page .about-label-section {
    font-size:
      1rem !important;

    letter-spacing:
      .07em !important;

    margin-bottom:
      .56rem !important;
  }

}


/* 360px / narrow phones:
   do not let labels collapse back to tiny typography */

@media (max-width: 380px) {

  .conocenos-page .about-label-person {
    font-size:
      1.04rem !important;
  }


  .conocenos-page .about-label-section {
    font-size:
      .99rem !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.5.5 — FINAL PAGE HIERARCHY / DESIGN LOCK

   - Larger ABOUT / SERVICES page kickers
   - More editorial breathing room between
     Sara and About copy on desktop only
   ========================================================== */


/* ----------------------------------------------------------
   PAGE KICKERS
   Only Sobre nosotros + Servicios.
   Do NOT alter global .eyebrow.
   ---------------------------------------------------------- */

.conocenos-page .page-kicker,
.services-page .page-kicker {
  color:
    #0b5690 !important;

  opacity:
    1 !important;

  font-size:
    1.05rem !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .085em !important;

  text-transform:
    uppercase !important;

  margin-bottom:
    .95rem !important;

  text-shadow:
    none !important;
}


/* ----------------------------------------------------------
   ABOUT PROFILE — DESKTOP EDITORIAL GAP

   Keep existing columns and image dimensions.
   Only add premium separation between portrait and copy.
   ---------------------------------------------------------- */

@media (min-width: 900px) {

  .conocenos-page .profile-grid {
    column-gap:
      clamp(3rem, 4vw, 4rem) !important;

    row-gap:
      0 !important;
  }

}


/* ----------------------------------------------------------
   MOBILE PAGE KICKERS
   ---------------------------------------------------------- */

@media (max-width: 899px) {

  .conocenos-page .page-kicker,
  .services-page .page-kicker {
    font-size:
      1rem !important;

    font-weight:
      800 !important;

    letter-spacing:
      .08em !important;

    line-height:
      1.18 !important;

    margin-bottom:
      .78rem !important;
  }

}


/* Maintain a strong legibility floor on 360px phones */

@media (max-width: 380px) {

  .conocenos-page .page-kicker,
  .services-page .page-kicker {
    font-size:
      .98rem !important;

    letter-spacing:
      .075em !important;
  }

}


/* ==========================================================
   MANCHEGO CONSULTING
   V5.6 R2.1 — PREMIUM EDITORIAL SYSTEM
   ========================================================== */


/* ==========================================================
   ABOUT — tighter person/title relationship
   ========================================================== */

.conocenos-page
.profile-grid
.about-label-person {
  margin-bottom:
    0 !important;
}


.conocenos-page
.profile-grid
.about-profile-title {
  margin-top:
    -.48rem !important;
}


/* ==========================================================
   ARTICLE PAGE
   ========================================================== */

body.blog-article-page main#contenido {
  background:
    #f7f9fb;
}


body.blog-article-page
main#contenido > .section:first-of-type {
  padding-top:
    clamp(1.6rem, 3vw, 2.4rem) !important;

  padding-bottom:
    clamp(2.8rem, 4vw, 3.8rem) !important;
}


body.blog-article-page
main#contenido > .section:last-of-type {
  padding-top:
    clamp(1.8rem, 3vw, 2.7rem) !important;

  padding-bottom:
    clamp(2.8rem, 4vw, 4rem) !important;
}


/* breadcrumb */

body.blog-article-page .breadcrumb {
  width:
    min(calc(100% - 2.5rem), 1080px);

  margin:
    0 auto 1rem !important;

  color:
    #647884 !important;

  font-size:
    .88rem !important;

  line-height:
    1.45 !important;
}


/* Blog label */

body.blog-article-page
main#contenido
.article-kicker {
  width:
    min(100%, 800px);

  margin:
    0 auto .72rem !important;

  text-align:
    center !important;

  color:
    #0b5690 !important;

  font-size:
    1rem !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .09em !important;

  text-transform:
    uppercase !important;

  opacity:
    1 !important;
}


/* main title */

body.blog-article-page
main#contenido
.article-title {
  width:
    min(calc(100% - 2.5rem), 980px);

  margin:
    0 auto 1.2rem !important;

  text-align:
    center !important;

  color:
    #071018 !important;

  font-size:
    clamp(2.65rem, 4.2vw, 4.3rem) !important;

  font-weight:
    800 !important;

  line-height:
    1.045 !important;

  letter-spacing:
    -.035em !important;

  text-wrap:
    balance;
}


/* prose shell */

body.blog-article-page
main#contenido
article.article-premium {
  width:
    min(calc(100% - 2.5rem), 1080px);

  max-width:
    1080px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


/* reading column */

body.blog-article-page
article.article-premium > p,

body.blog-article-page
article.article-premium > ul,

body.blog-article-page
article.article-premium > ol,

body.blog-article-page
article.article-premium > blockquote,

body.blog-article-page
main#contenido
.article-deck,

body.blog-article-page
main#contenido
.article-section-title,

body.blog-article-page
main#contenido
.article-subhead {
  width:
    min(100%, 800px);

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* paragraphs */

body.blog-article-page
article.article-premium > p {
  margin-top:
    0 !important;

  margin-bottom:
    1.18rem !important;

  color:
    #344956 !important;

  font-size:
    1.125rem !important;

  line-height:
    1.76 !important;
}


/* article introduction */

body.blog-article-page
main#contenido
.article-deck {
  margin-top:
    .4rem !important;

  margin-bottom:
    1.75rem !important;

  text-align:
    center !important;

  color:
    #4b6270 !important;

  font-size:
    clamp(1.14rem, 1.45vw, 1.28rem) !important;

  font-weight:
    500 !important;

  line-height:
    1.55 !important;

  letter-spacing:
    -.01em !important;

  text-wrap:
    balance;
}


/* primary headings */

body.blog-article-page
main#contenido
.article-section-title {
  margin-top:
    3rem !important;

  margin-bottom:
    .85rem !important;

  color:
    #071018 !important;

  font-size:
    clamp(1.85rem, 2.3vw, 2.2rem) !important;

  font-weight:
    800 !important;

  line-height:
    1.14 !important;

  letter-spacing:
    -.022em !important;
}


/* numbered / feature headings */

body.blog-article-page
main#contenido
.article-subhead {
  margin-top:
    1.85rem !important;

  margin-bottom:
    .6rem !important;

  color:
    #0b5690 !important;

  font-size:
    clamp(1.22rem, 1.5vw, 1.4rem) !important;

  font-weight:
    800 !important;

  line-height:
    1.25 !important;
}


/* small heading paragraphs */

body.blog-article-page
main#contenido
.article-step-paragraph {
  margin-top:
    1.6rem !important;

  margin-bottom:
    .5rem !important;

  color:
    #152d3a !important;

  font-weight:
    800 !important;
}


body.blog-article-page
main#contenido
.article-mini-label {
  margin-top:
    1rem !important;

  margin-bottom:
    .4rem !important;

  color:
    #0b5690 !important;

  font-weight:
    800 !important;
}


/* source bullet-like paragraphs */

body.blog-article-page
main#contenido
.article-point {
  padding:
    .9rem 1rem !important;

  border:
    1px solid #d7e4ec;

  border-left:
    4px solid #0b5690;

  border-radius:
    12px;

  background:
    #fff;
}


/* lists */

body.blog-article-page
article.article-premium > ul,

body.blog-article-page
article.article-premium > ol {
  margin-top:
    .8rem !important;

  margin-bottom:
    1.55rem !important;

  padding-left:
    1.45rem !important;
}


body.blog-article-page
article.article-premium li {
  margin-bottom:
    .5rem;

  color:
    #344956 !important;

  font-size:
    1.125rem !important;

  line-height:
    1.72 !important;
}


body.blog-article-page
article.article-premium li::marker {
  color:
    #0b5690;

  font-weight:
    800;
}


/* figures */

body.blog-article-page
main#contenido
.article-figure {
  width:
    min(calc(100% - 2.5rem), 920px);

  margin:
    1.9rem auto 2.35rem !important;
}


body.blog-article-page
main#contenido
.article-hero-figure {
  width:
    min(calc(100% - 2.5rem), 1040px);

  margin-top:
    1.45rem !important;

  margin-bottom:
    2.55rem !important;
}


body.blog-article-page
main#contenido
.article-figure img {
  display:
    block;

  width:
    100% !important;

  max-width:
    100% !important;

  height:
    auto !important;

  margin:
    0 auto;

  border:
    1px solid rgba(11, 86, 144, .10);

  border-radius:
    18px !important;

  box-shadow:
    0 14px 36px rgba(14, 38, 54, .07);
}


body.blog-article-page
main#contenido
.article-figure figcaption {
  max-width:
    800px;

  margin:
    .65rem auto 0;

  text-align:
    center;

  color:
    #71838e;

  font-size:
    .88rem;

  line-height:
    1.5;
}


/* article closing CTA title */

body.blog-article-page
main#contenido
.article-cta-title {
  width:
    min(calc(100% - 2.5rem), 900px);

  margin:
    0 auto .8rem !important;

  text-align:
    center !important;

  color:
    #071018 !important;

  font-size:
    clamp(1.75rem, 2.3vw, 2.15rem) !important;

  font-weight:
    800 !important;

  line-height:
    1.14 !important;

  letter-spacing:
    -.02em !important;
}


/* previous / next */

body.blog-article-page .article-nav {
  width:
    min(calc(100% - 2.5rem), 900px);

  margin:
    2.5rem auto 0 !important;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    1rem;
}


body.blog-article-page .article-nav a {
  display:
    flex;

  align-items:
    center;

  min-height:
    84px;

  padding:
    1rem 1.15rem;

  border:
    1px solid #d7e4ec;

  border-radius:
    14px;

  background:
    #fff;

  color:
    #17303e !important;

  font-weight:
    700;

  line-height:
    1.35;

  text-decoration:
    none;

  box-shadow:
    0 10px 26px rgba(14, 38, 54, .045);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


body.blog-article-page .article-nav a:hover,
body.blog-article-page .article-nav a:focus-visible {
  transform:
    translateY(-2px);

  border-color:
    #5789ab;

  box-shadow:
    0 14px 30px rgba(14, 38, 54, .075);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 899px) {

  body.blog-article-page
  main#contenido > .section:first-of-type {
    padding-top:
      1.3rem !important;

    padding-bottom:
      2.65rem !important;
  }


  body.blog-article-page .breadcrumb {
    width:
      calc(100% - 2.5rem);

    margin-bottom:
      .7rem !important;

    font-size:
      .82rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-kicker {
    margin-bottom:
      .62rem !important;

    font-size:
      .94rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-title {
    width:
      calc(100% - 2.5rem);

    margin-bottom:
      1rem !important;

    font-size:
      clamp(2rem, 9vw, 2.4rem) !important;

    line-height:
      1.07 !important;
  }


  body.blog-article-page
  main#contenido
  article.article-premium {
    width:
      calc(100% - 2.5rem);
  }


  body.blog-article-page
  article.article-premium > p,

  body.blog-article-page
  article.article-premium li {
    font-size:
      1.03rem !important;

    line-height:
      1.72 !important;
  }


  body.blog-article-page
  main#contenido
  .article-deck {
    margin-bottom:
      1.35rem !important;

    font-size:
      1.07rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-section-title {
    margin-top:
      2.3rem !important;

    font-size:
      1.6rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-subhead {
    margin-top:
      1.55rem !important;

    font-size:
      1.18rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-figure,

  body.blog-article-page
  main#contenido
  .article-hero-figure {
    width:
      calc(100% - 2.5rem);

    margin-top:
      1.4rem !important;

    margin-bottom:
      1.85rem !important;
  }


  body.blog-article-page
  main#contenido
  .article-figure img {
    border-radius:
      14px !important;
  }


  body.blog-article-page
  main#contenido
  .article-cta-title {
    width:
      calc(100% - 2.5rem);

    font-size:
      1.55rem !important;
  }


  body.blog-article-page .article-nav {
    width:
      calc(100% - 2.5rem);

    grid-template-columns:
      1fr;

    margin-top:
      2.05rem !important;
  }


  .conocenos-page
  .profile-grid
  .about-profile-title {
    margin-top:
      -.34rem !important;
  }

}


@media (max-width: 380px) {

  body.blog-article-page
  main#contenido
  .article-title {
    font-size:
      1.95rem !important;
  }


  body.blog-article-page
  article.article-premium > p,

  body.blog-article-page
  article.article-premium li {
    font-size:
      1rem !important;
  }

}



/* ==========================================================
   MANCHEGO CONSULTING
   V5.7 R3 — EXECUTIVE INSIGHTS / EDITORIAL DESIGN LOCK
   ========================================================== */

body.blog-article-page {
  background: #ffffff;
}


/* ARTICLE MASTHEAD */

body.blog-article-page .article-head {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  padding:
    clamp(2.6rem, 4.2vw, 4.25rem)
    0
    clamp(2.25rem, 3.4vw, 3.4rem)
    !important;

  background:
    linear-gradient(
      180deg,
      #f4f8fb 0%,
      #f8fbfd 54%,
      #ffffff 100%
    );

  border-bottom:
    1px solid rgba(11, 86, 144, .09);
}


body.blog-article-page .article-head > .reading {
  width:
    min(
      1180px,
      calc(100% - 48px)
    )
    !important;

  max-width: 1180px !important;
  margin-inline: auto !important;

  text-align: center !important;
}


/* BREADCRUMB */

body.blog-article-page .article-head .breadcrumb {
  width: 100%;

  margin:
    0 auto
    clamp(1.35rem, 2vw, 1.9rem)
    !important;

  color: #667985;

  font-size: .88rem;
  line-height: 1.45;
}


body.blog-article-page .article-head .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: .4rem .62rem;

  padding: 0;
  margin: 0;

  list-style: none;
}


body.blog-article-page .article-head .breadcrumb a {
  color: #425e6e;
  text-decoration: none;
}


body.blog-article-page .article-head .breadcrumb a:hover {
  color: #0b5690;

  text-decoration: underline;
  text-underline-offset: .15em;
}


/* ARTICLE KICKER */

body.blog-article-page .article-kicker {
  margin:
    0 auto
    .75rem
    !important;

  color: #0b5690 !important;

  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2;

  letter-spacing: .12em !important;
  text-transform: uppercase;

  text-align: center !important;
}


/* ARTICLE TITLE */

body.blog-article-page .article-title {
  width: 100%;

  max-width: 1120px !important;

  margin:
    0 auto
    !important;

  color: #07131d !important;

  font-size:
    clamp(
      2.55rem,
      4.2vw,
      4.45rem
    )
    !important;

  font-weight: 800 !important;

  line-height: 1.01 !important;
  letter-spacing: -.047em !important;

  text-align: center !important;
  text-wrap: balance;
}


/* REAL ARTICLE METADATA */

body.blog-article-page .article-meta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin:
    1.3rem auto
    0
    !important;

  padding:
    .48rem
    .88rem;

  color: #4e6573 !important;

  background:
    rgba(255, 255, 255, .84);

  border:
    1px solid rgba(11, 86, 144, .13);

  border-radius: 999px;

  font-size: .9rem !important;
  font-weight: 650;

  line-height: 1.2;
}


/* FEATURED IMAGE */

body.blog-article-page .article-hero-figure {
  width:
    min(
      1180px,
      calc(100% - 48px)
    )
    !important;

  max-width: 1180px !important;

  margin:
    clamp(1.9rem, 3vw, 3rem)
    auto
    clamp(2.6rem, 4vw, 3.8rem)
    !important;

  overflow: hidden;

  border-radius: 22px;

  background: #edf3f7;

  box-shadow:
    0 22px 55px rgba(14, 38, 55, .10);
}


body.blog-article-page .article-hero-figure img {
  display: block;

  width: 100% !important;
  height: auto !important;

  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;

  margin: 0 !important;
}


/* READING COLUMN */

body.blog-article-page article.reading.prose {
  width:
    min(
      780px,
      calc(100% - 48px)
    )
    !important;

  max-width: 780px !important;

  margin:
    0 auto
    !important;

  padding:
    0
    0
    clamp(3rem, 5vw, 5rem);

  color: #243946;

  text-align: left !important;
}


body.blog-article-page article.reading.prose p {
  margin:
    0
    0
    1.35rem;

  color: #2a404d;

  font-size: 1.075rem;
  font-weight: 400;

  line-height: 1.82;
  letter-spacing: -.006em;

  text-align: left;
}


body.blog-article-page article.reading.prose > p:first-of-type {
  margin-bottom: 1.7rem;

  color: #17313f;

  font-size: 1.19rem;
  font-weight: 500;

  line-height: 1.72;
}


/* MAJOR HEADINGS */

body.blog-article-page article.reading.prose h2 {
  max-width: 760px;

  margin:
    clamp(2.8rem, 4.7vw, 4rem)
    auto
    1.18rem
    !important;

  color: #07131d !important;

  font-size:
    clamp(
      1.8rem,
      2.7vw,
      2.4rem
    )
    !important;

  font-weight: 780;

  line-height: 1.13;
  letter-spacing: -.032em;

  text-align: center !important;
  text-wrap: balance;
}


body.blog-article-page article.reading.prose h3 {
  margin:
    2.25rem
    0
    .75rem;

  color: #102733;

  font-size: 1.4rem;
  font-weight: 750;

  line-height: 1.25;
  letter-spacing: -.02em;
}


/* LISTS */

body.blog-article-page article.reading.prose ul,
body.blog-article-page article.reading.prose ol {
  margin:
    1rem
    0
    1.75rem;

  padding-left: 1.55rem;
}


body.blog-article-page article.reading.prose li {
  margin: .55rem 0;

  color: #2a404d;

  font-size: 1.055rem;
  line-height: 1.72;
}


body.blog-article-page article.reading.prose li::marker {
  color: #0b5690;
  font-weight: 700;
}


/* LINKS */

body.blog-article-page article.reading.prose a {
  color: #0b5690;

  font-weight: 600;

  text-decoration-thickness: 1px;
  text-underline-offset: .17em;
}


/* BLOCKQUOTES */

body.blog-article-page article.reading.prose blockquote {
  margin: 2.35rem 0;

  padding:
    1.3rem
    1.55rem
    1.3rem
    1.7rem;

  border-left:
    4px solid #0b5690;

  border-radius:
    0 14px 14px 0;

  background: #f4f8fb;

  color: #17313f;

  font-size: 1.1rem;
  line-height: 1.7;
}


/* ARTICLE BODY FIGURES */

body.blog-article-page article.reading.prose .article-figure {
  width:
    min(
      960px,
      calc(100vw - 48px)
    );

  max-width: none;

  margin:
    clamp(2.2rem, 4vw, 3.25rem)
    0;

  margin-left: 50%;

  transform:
    translateX(-50%);
}


body.blog-article-page article.reading.prose .article-figure img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  border-radius: 18px;

  background: #f0f5f8;

  box-shadow:
    0 14px 38px rgba(14, 38, 55, .08);
}


body.blog-article-page article.reading.prose figcaption {
  max-width: 760px;

  margin:
    .78rem
    auto
    0;

  color: #6a7d88;

  font-size: .88rem;
  line-height: 1.5;

  text-align: center;
}


/* ARTICLE NAVIGATION */

body.blog-article-page .article-nav {
  width:
    min(
      960px,
      calc(100% - 48px)
    );

  max-width: 960px;

  margin:
    0 auto
    clamp(3rem, 5vw, 5rem);

  padding-top: 2rem;

  border-top:
    1px solid rgba(11, 86, 144, .13);

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 1rem;
}


body.blog-article-page .article-nav a {
  display: flex;

  align-items: center;

  min-height: 80px;

  padding:
    1rem
    1.2rem;

  border:
    1px solid rgba(11, 86, 144, .13);

  border-radius: 15px;

  background: #f8fbfd;

  color: #17313f;

  font-weight: 700;
  line-height: 1.35;

  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


body.blog-article-page .article-nav a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(11, 86, 144, .32);

  background: #ffffff;

  box-shadow:
    0 12px 30px rgba(16, 50, 72, .08);
}


/* ==========================================================
   FULL BLOG-CARD CLICK AREA
   ========================================================== */

.blog-card {
  position: relative;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.blog-card .text-link {
  position: static !important;
}


.blog-card .text-link::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 5;

  border-radius: inherit;
}


.blog-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(11, 86, 144, .24);

  box-shadow:
    0 16px 38px rgba(12, 45, 66, .09);
}


.blog-card:focus-within {
  outline:
    3px solid rgba(11, 86, 144, .22);

  outline-offset:
    3px;
}


.blog-card .blog-card-media {
  overflow: hidden;
}


.blog-card .blog-card-media img,
.blog-card h2,
.blog-card h3 {
  transition:
    transform .2s ease,
    color .18s ease;
}


.blog-card:hover h2,
.blog-card:hover h3 {
  color: #0b5690;
}


.blog-card:hover .blog-card-media img {
  transform:
    scale(1.018);
}


/* ABOUT MICRO-SPACING */

.conocenos-page .about-label-person {
  margin-bottom:
    .32rem
    !important;
}


.conocenos-page .about-label-person + .about-profile-title {
  margin-top:
    0
    !important;
}


/* TABLET */

@media (max-width: 899px) {

  body.blog-article-page .article-head {
    padding:
      2.15rem
      0
      2.1rem
      !important;
  }


  body.blog-article-page .article-head > .reading {
    width:
      calc(100% - 36px)
      !important;
  }


  body.blog-article-page .article-head .breadcrumb {
    margin-bottom:
      1.15rem
      !important;

    font-size: .8rem;
  }


  body.blog-article-page .article-kicker {
    margin-bottom:
      .62rem
      !important;

    font-size:
      .89rem
      !important;
  }


  body.blog-article-page .article-title {
    max-width:
      720px
      !important;

    font-size:
      clamp(
        2.15rem,
        8vw,
        3.45rem
      )
      !important;

    line-height:
      1.025
      !important;

    letter-spacing:
      -.041em
      !important;
  }


  body.blog-article-page .article-meta {
    margin-top:
      1.05rem
      !important;
  }


  body.blog-article-page .article-hero-figure {
    width:
      calc(100% - 36px)
      !important;

    margin-top:
      1.65rem
      !important;

    margin-bottom:
      2.4rem
      !important;

    border-radius: 17px;
  }


  body.blog-article-page article.reading.prose {
    width:
      min(
        720px,
        calc(100% - 40px)
      )
      !important;
  }


  body.blog-article-page article.reading.prose p {
    font-size: 1.03rem;
    line-height: 1.76;
  }


  body.blog-article-page article.reading.prose > p:first-of-type {
    font-size: 1.12rem;
  }


  body.blog-article-page article.reading.prose h2 {
    margin-top:
      2.65rem
      !important;

    font-size:
      clamp(
        1.65rem,
        5.8vw,
        2.1rem
      )
      !important;
  }


  body.blog-article-page article.reading.prose .article-figure {
    width:
      calc(100vw - 36px);

    margin-top: 2rem;
    margin-bottom: 2.3rem;
  }


  body.blog-article-page .article-nav {
    width:
      calc(100% - 40px);

    grid-template-columns:
      1fr;

    margin-bottom:
      3.5rem;
  }

}


/* MOBILE */

@media (max-width: 480px) {

  body.blog-article-page .article-head {
    padding:
      1.7rem
      0
      1.75rem
      !important;
  }


  body.blog-article-page .article-head > .reading {
    width:
      calc(100% - 30px)
      !important;
  }


  body.blog-article-page .article-head .breadcrumb {
    margin-bottom:
      .95rem
      !important;

    font-size: .74rem;
  }


  body.blog-article-page .article-kicker {
    margin-bottom:
      .58rem
      !important;

    font-size:
      .85rem
      !important;
  }


  body.blog-article-page .article-title {
    font-size:
      clamp(
        1.95rem,
        10.2vw,
        2.52rem
      )
      !important;

    line-height:
      1.035
      !important;

    letter-spacing:
      -.038em
      !important;
  }


  body.blog-article-page .article-meta {
    margin-top:
      .9rem
      !important;

    padding:
      .42rem
      .72rem;

    font-size:
      .8rem
      !important;
  }


  body.blog-article-page .article-hero-figure {
    width:
      calc(100% - 30px)
      !important;

    margin:
      1.35rem
      auto
      2rem
      !important;

    border-radius:
      14px;
  }


  body.blog-article-page article.reading.prose {
    width:
      calc(100% - 34px)
      !important;
  }


  body.blog-article-page article.reading.prose p {
    margin-bottom:
      1.18rem;

    font-size: 1rem;
    line-height: 1.72;
  }


  body.blog-article-page article.reading.prose > p:first-of-type {
    font-size: 1.075rem;
    line-height: 1.68;
  }


  body.blog-article-page article.reading.prose h2 {
    margin:
      2.35rem
      auto
      .95rem
      !important;

    font-size:
      1.6rem
      !important;

    line-height: 1.16;
  }


  body.blog-article-page article.reading.prose h3 {
    margin-top: 1.9rem;

    font-size: 1.26rem;
  }


  body.blog-article-page article.reading.prose li {
    font-size: .98rem;
    line-height: 1.68;
  }


  body.blog-article-page article.reading.prose .article-figure {
    width:
      calc(100vw - 30px);

    margin-top: 1.7rem;
    margin-bottom: 1.95rem;
  }


  body.blog-article-page article.reading.prose .article-figure img {
    border-radius: 13px;
  }


  body.blog-article-page .article-nav {
    width:
      calc(100% - 34px);

    gap: .72rem;

    margin-bottom: 3rem;
  }


  body.blog-article-page .article-nav a {
    min-height: 68px;

    padding:
      .9rem
      1rem;

    border-radius: 13px;

    font-size: .92rem;
  }

}


@media (prefers-reduced-motion: reduce) {

  .blog-card,
  .blog-card .blog-card-media img,
  body.blog-article-page .article-nav a {
    transition:
      none
      !important;
  }

}



/* ==========================================================
   NET3MAX V5.8 R5 PREMIUM CONSULTING ARTICLES
   ========================================================== */


/* ----------------------------------------------------------
   CLEAN ARTICLE CANVAS
   ---------------------------------------------------------- */

body.blog-article-page {
    background:
        #ffffff
        !important;
}


body.blog-article-page main#contenido {
    width:
        min(
            1180px,
            calc(100% - 48px)
        )
        !important;

    max-width:
        1180px
        !important;

    margin:
        0 auto
        !important;

    padding:
        clamp(2.6rem, 4.2vw, 4.4rem)
        0
        clamp(3.6rem, 5vw, 5.4rem)
        !important;

    background:
        transparent
        !important;
}


/* ----------------------------------------------------------
   DESKTOP OPENING
   TEXT LEFT / IMAGE RIGHT
   ---------------------------------------------------------- */

@media (min-width: 900px) {

    body.blog-article-page main#contenido {
        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(340px, .92fr);

        column-gap:
            clamp(
                3rem,
                5vw,
                5.25rem
            );

        align-items:
            center;
    }


    body.blog-article-page
    main#contenido > .article-head {
        grid-column:
            1;

        grid-row:
            1;

        width:
            100%
            !important;

        max-width:
            none
            !important;

        min-height:
            0
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        background:
            transparent
            !important;

        border:
            0
            !important;

        box-shadow:
            none
            !important;
    }


    body.blog-article-page
    main#contenido > .article-hero-figure {
        grid-column:
            2;

        grid-row:
            1;

        width:
            100%
            !important;

        max-width:
            470px
            !important;

        margin:
            0
            !important;

        justify-self:
            end;

        align-self:
            center;

        position:
            static
            !important;

        inset:
            auto
            !important;

        transform:
            none
            !important;
    }


    body.blog-article-page
    main#contenido
    > *:not(.article-head):not(.article-hero-figure) {
        grid-column:
            1 / -1;
    }

}


/* ----------------------------------------------------------
   HEADER CONTENT
   ---------------------------------------------------------- */

body.blog-article-page
.article-head > .reading {
    width:
        100%
        !important;

    max-width:
        none
        !important;

    margin:
        0
        !important;

    padding:
        0
        !important;

    text-align:
        left
        !important;
}


body.blog-article-page
.article-head .breadcrumb {
    margin:
        0 0
        1.2rem
        !important;

    color:
        #657985
        !important;

    font-size:
        .82rem
        !important;

    font-weight:
        500;

    line-height:
        1.45;

    text-align:
        left
        !important;
}


body.blog-article-page
.article-head .breadcrumb ol {
    justify-content:
        flex-start
        !important;
}


body.blog-article-page
.article-kicker {
    margin:
        0 0
        .72rem
        !important;

    color:
        #0b5690
        !important;

    font-size:
        .94rem
        !important;

    font-weight:
        800
        !important;

    line-height:
        1.2;

    letter-spacing:
        .11em;

    text-align:
        left
        !important;

    text-transform:
        uppercase;
}


body.blog-article-page
.article-title {
    width:
        100%
        !important;

    max-width:
        660px
        !important;

    margin:
        0
        !important;

    color:
        #07131d
        !important;

    font-size:
        clamp(
            2.35rem,
            3.4vw,
            3.35rem
        )
        !important;

    font-weight:
        800
        !important;

    line-height:
        1.035
        !important;

    letter-spacing:
        -.038em
        !important;

    text-align:
        left
        !important;

    text-wrap:
        balance;
}


body.blog-article-page
.article-meta {
    display:
        flex
        !important;

    align-items:
        center;

    gap:
        .65rem;

    margin:
        1.15rem 0 0
        !important;

    padding:
        0
        !important;

    color:
        #58707d
        !important;

    font-size:
        .88rem
        !important;

    font-weight:
        550;

    line-height:
        1.4;

    text-align:
        left
        !important;
}


/* ----------------------------------------------------------
   EXECUTIVE HERO IMAGE
   ---------------------------------------------------------- */

body.blog-article-page
.article-hero-figure {
    overflow:
        hidden
        !important;

    background:
        #eef3f6
        !important;

    border:
        1px solid
        rgba(
            11,
            86,
            144,
            .10
        )
        !important;

    border-radius:
        16px
        !important;

    box-shadow:
        0 18px 42px
        rgba(
            14,
            44,
            62,
            .11
        )
        !important;
}


body.blog-article-page
.article-hero-figure img {
    display:
        block
        !important;

    width:
        100%
        !important;

    max-width:
        100%
        !important;

    height:
        auto
        !important;

    max-height:
        430px
        !important;

    aspect-ratio:
        auto
        !important;

    object-fit:
        contain
        !important;

    object-position:
        center
        !important;

    margin:
        0
        !important;

    border-radius:
        0
        !important;

    box-shadow:
        none
        !important;
}


/* ----------------------------------------------------------
   LONG-FORM READING COLUMN
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose {
    width:
        min(
            780px,
            100%
        )
        !important;

    max-width:
        780px
        !important;

    margin:
        clamp(
            3.4rem,
            5.2vw,
            4.8rem
        )
        auto
        0
        !important;

    padding:
        0
        !important;

    color:
        #293f4b
        !important;

    background:
        transparent
        !important;

    border:
        0
        !important;

    box-shadow:
        none
        !important;

    text-align:
        left
        !important;
}


/* Executive lead paragraph */

body.blog-article-page
article.reading.prose
> p:first-of-type {
    margin-bottom:
        1.55rem
        !important;

    color:
        #344c59
        !important;

    font-size:
        1.17rem
        !important;

    font-weight:
        500;

    line-height:
        1.66
        !important;
}


body.blog-article-page
article.reading.prose p {
    max-width:
        none
        !important;

    margin:
        0 0
        1.12rem
        !important;

    color:
        #2b414d
        !important;

    font-size:
        1.04rem
        !important;

    font-weight:
        400;

    line-height:
        1.76
        !important;

    letter-spacing:
        -.003em;

    text-align:
        left
        !important;
}


/* ----------------------------------------------------------
   PROFESSIONAL HEADING HIERARCHY
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose h2,

body.blog-article-page
article.reading.prose
.article-section-title {
    max-width:
        720px
        !important;

    margin:
        clamp(
            2.7rem,
            4vw,
            3.55rem
        )
        0
        .9rem
        !important;

    padding:
        0
        !important;

    color:
        #07131d
        !important;

    font-size:
        clamp(
            1.65rem,
            2vw,
            2.03rem
        )
        !important;

    font-weight:
        780
        !important;

    line-height:
        1.16
        !important;

    letter-spacing:
        -.024em
        !important;

    text-align:
        left
        !important;

    text-wrap:
        balance;
}


body.blog-article-page
article.reading.prose h3,

body.blog-article-page
article.reading.prose
.article-subhead {
    margin:
        1.75rem 0
        .48rem
        !important;

    padding:
        0
        !important;

    color:
        #163847
        !important;

    font-size:
        1.15rem
        !important;

    font-weight:
        760
        !important;

    line-height:
        1.32
        !important;

    text-align:
        left
        !important;
}


/* ----------------------------------------------------------
   REMOVE PREVIOUS DECORATIVE ICON BOXES
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose h2::before,

body.blog-article-page
article.reading.prose h3::before,

body.blog-article-page
article.reading.prose
.article-section-title::before,

body.blog-article-page
article.reading.prose
.article-subhead::before,

body.blog-article-page
article.reading.prose
.article-point::before {
    content:
        none
        !important;

    display:
        none
        !important;
}


body.blog-article-page
article.reading.prose
.article-point {
    position:
        static
        !important;

    inset:
        auto
        !important;

    margin:
        .85rem 0
        1.05rem
        !important;

    padding:
        .48rem
        0
        .48rem
        1rem
        !important;

    background:
        transparent
        !important;

    color:
        #29414e
        !important;

    border:
        0
        !important;

    border-left:
        2px solid
        #6696b2
        !important;

    border-radius:
        0
        !important;

    box-shadow:
        none
        !important;

    transform:
        none
        !important;

    text-align:
        left
        !important;
}


/* ----------------------------------------------------------
   LISTS
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose ul,

body.blog-article-page
article.reading.prose ol {
    margin:
        .8rem 0
        1.45rem
        !important;

    padding-left:
        1.45rem
        !important;
}


body.blog-article-page
article.reading.prose li {
    margin:
        .42rem 0;

    color:
        #2b414d
        !important;

    font-size:
        1.02rem;

    line-height:
        1.67;
}


body.blog-article-page
article.reading.prose li::marker {
    color:
        #0b5690
        !important;

    font-weight:
        700;
}


/* ----------------------------------------------------------
   BODY FIGURES
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose figure,

body.blog-article-page
article.reading.prose
.article-figure {
    position:
        static
        !important;

    inset:
        auto
        !important;

    width:
        min(
            700px,
            100%
        )
        !important;

    max-width:
        700px
        !important;

    margin:
        clamp(
            1.9rem,
            3.4vw,
            2.7rem
        )
        auto
        !important;

    padding:
        0
        !important;

    transform:
        none
        !important;

    float:
        none
        !important;
}


body.blog-article-page
article.reading.prose figure img,

body.blog-article-page
article.reading.prose
.article-figure img {
    display:
        block
        !important;

    width:
        auto
        !important;

    max-width:
        100%
        !important;

    height:
        auto
        !important;

    max-height:
        500px
        !important;

    margin:
        0 auto
        !important;

    object-fit:
        contain
        !important;

    object-position:
        center
        !important;

    border:
        0
        !important;

    border-radius:
        12px
        !important;

    box-shadow:
        0 12px 30px
        rgba(
            14,
            44,
            62,
            .08
        )
        !important;
}


body.blog-article-page
article.reading.prose figcaption {
    max-width:
        620px;

    margin:
        .7rem auto 0
        !important;

    color:
        #687d88
        !important;

    font-size:
        .82rem
        !important;

    line-height:
        1.45;

    text-align:
        center
        !important;
}


/* ----------------------------------------------------------
   TABLES IF PRESENT
   ---------------------------------------------------------- */

body.blog-article-page
article.reading.prose table {
    width:
        100%;

    margin:
        1.8rem 0;

    border-collapse:
        collapse;

    font-size:
        .95rem;
}


body.blog-article-page
article.reading.prose th,

body.blog-article-page
article.reading.prose td {
    padding:
        .8rem .9rem;

    border-bottom:
        1px solid
        #d9e3e8;

    vertical-align:
        top;
}


body.blog-article-page
article.reading.prose th {
    color:
        #0a4268;

    background:
        #f3f7f9;

    font-weight:
        750;
}


/* ----------------------------------------------------------
   PREVIOUS / NEXT
   ---------------------------------------------------------- */

body.blog-article-page
.article-nav {
    width:
        min(
            780px,
            100%
        )
        !important;

    max-width:
        780px
        !important;

    margin:
        clamp(
            2.8rem,
            4vw,
            3.8rem
        )
        auto
        0
        !important;

    padding:
        1.35rem
        0
        0
        !important;

    border-top:
        1px solid
        rgba(
            11,
            86,
            144,
            .13
        )
        !important;

    background:
        transparent
        !important;
}


body.blog-article-page
.article-nav a {
    padding:
        1rem
        1.1rem
        !important;

    color:
        #123b52
        !important;

    background:
        #ffffff
        !important;

    border:
        1px solid
        #dce7ec
        !important;

    border-radius:
        10px
        !important;

    box-shadow:
        0 8px 22px
        rgba(
            14,
            43,
            61,
            .045
        )
        !important;

    text-decoration:
        none
        !important;
}


body.blog-article-page
.article-nav a:hover {
    border-color:
        rgba(
            11,
            86,
            144,
            .34
        )
        !important;

    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   PREMIUM ARTICLE CTA
   ---------------------------------------------------------- */

body.blog-article-page
.cta-band {
    width:
        min(
            860px,
            100%
        )
        !important;

    max-width:
        860px
        !important;

    margin:
        clamp(
            3rem,
            4.5vw,
            4.2rem
        )
        auto
        0
        !important;

    padding:
        clamp(
            1.65rem,
            3vw,
            2.2rem
        )
        !important;

    background:
        linear-gradient(
            112deg,
            #05283c 0%,
            #0b5688 100%
        )
        !important;

    border:
        0
        !important;

    border-radius:
        14px
        !important;

    box-shadow:
        0 16px 36px
        rgba(
            7,
            38,
            56,
            .12
        )
        !important;
}


body.blog-article-page
.cta-band h2,

body.blog-article-page
.cta-band h3 {
    margin-top:
        0
        !important;

    color:
        #ffffff
        !important;

    text-align:
        left
        !important;
}


body.blog-article-page
.cta-band p {
    color:
        rgba(
            255,
            255,
            255,
            .90
        )
        !important;

    text-align:
        left
        !important;
}


/* ==========================================================
   MOBILE / TABLET ARTICLE DESIGN
   ========================================================== */

@media (max-width: 899px) {

    body.blog-article-page
    main#contenido {
        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            none
            !important;

        margin:
            0
            !important;

        padding:
            1.5rem
            0
            3rem
            !important;
    }


    body.blog-article-page
    main#contenido > .article-head {
        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            0
            1.2rem
            !important;

        padding:
            .25rem
            0
            .6rem
            !important;

        min-height:
            0
            !important;

        background:
            transparent
            !important;

        border:
            0
            !important;

        box-shadow:
            none
            !important;
    }


    body.blog-article-page
    .article-head .breadcrumb {
        margin-bottom:
            .9rem
            !important;

        font-size:
            .76rem
            !important;
    }


    body.blog-article-page
    .article-title {
        max-width:
            none
            !important;

        font-size:
            clamp(
                2rem,
                8vw,
                2.75rem
            )
            !important;

        line-height:
            1.04
            !important;

        letter-spacing:
            -.035em
            !important;
    }


    body.blog-article-page
    .article-meta {
        margin-top:
            .95rem
            !important;
    }


    body.blog-article-page
    main#contenido > .article-hero-figure {
        position:
            static
            !important;

        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            .9rem
            1.2rem
            0
            !important;

        transform:
            none
            !important;

        border-radius:
            12px
            !important;
    }


    body.blog-article-page
    .article-hero-figure img {
        width:
            100%
            !important;

        max-height:
            none
            !important;

        object-fit:
            contain
            !important;
    }


    body.blog-article-page
    article.reading.prose {
        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            2.35rem
            1.2rem
            0
            !important;
    }


    body.blog-article-page
    article.reading.prose
    > p:first-of-type {
        font-size:
            1.08rem
            !important;

        line-height:
            1.66
            !important;
    }


    body.blog-article-page
    article.reading.prose p {
        font-size:
            1rem
            !important;

        line-height:
            1.70
            !important;
    }


    body.blog-article-page
    article.reading.prose h2 {
        margin-top:
            2.35rem
            !important;

        font-size:
            clamp(
                1.48rem,
                6.3vw,
                1.85rem
            )
            !important;
    }


    body.blog-article-page
    article.reading.prose h3 {
        margin-top:
            1.55rem
            !important;

        font-size:
            1.08rem
            !important;
    }


    body.blog-article-page
    article.reading.prose figure {
        width:
            100%
            !important;

        margin:
            1.7rem
            auto
            !important;
    }


    body.blog-article-page
    .article-nav,

    body.blog-article-page
    .cta-band {
        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin-left:
            1.2rem
            !important;

        margin-right:
            1.2rem
            !important;
    }

}


/* ==========================================================
   NARROW PHONE
   ========================================================== */

@media (max-width: 480px) {

    body.blog-article-page
    main#contenido > .article-head,

    body.blog-article-page
    main#contenido > .article-hero-figure,

    body.blog-article-page
    article.reading.prose,

    body.blog-article-page
    .article-nav,

    body.blog-article-page
    .cta-band {
        margin-left:
            1rem
            !important;

        margin-right:
            1rem
            !important;
    }


    body.blog-article-page
    .article-title {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.35rem
            )
            !important;

        line-height:
            1.045
            !important;
    }


    body.blog-article-page
    article.reading.prose p {
        font-size:
            .98rem
            !important;

        line-height:
            1.68
            !important;
    }


    body.blog-article-page
    article.reading.prose h2 {
        font-size:
            1.48rem
            !important;
    }


    body.blog-article-page
    .cta-band {
        padding:
            1.45rem
            !important;
    }

}



/* ==========================================================
   NET3MAX V5.8.1 MOBILE EDITORIAL GUTTERS
   ========================================================== */

@media (max-width: 899px) {

    body.blog-article-page {
        --mc-article-mobile-gutter:
            clamp(
                20px,
                5.5vw,
                24px
            );
    }


    /*
     * One consistent horizontal editorial line:
     *
     * masthead
     * hero image
     * article prose
     * previous/next navigation
     * CTA
     */

    body.blog-article-page
    main#contenido > .article-head,

    body.blog-article-page
    main#contenido > .article-hero-figure,

    body.blog-article-page
    article.reading.prose,

    body.blog-article-page
    .article-nav,

    body.blog-article-page
    .cta-band {
        margin-left:
            var(--mc-article-mobile-gutter)
            !important;

        margin-right:
            var(--mc-article-mobile-gutter)
            !important;
    }


    body.blog-article-page
    .article-head,

    body.blog-article-page
    .article-hero-figure,

    body.blog-article-page
    article.reading.prose,

    body.blog-article-page
    .article-nav,

    body.blog-article-page
    .cta-band {
        box-sizing:
            border-box
            !important;
    }


    body.blog-article-page
    .article-hero-figure {
        overflow:
            hidden;

        border-radius:
            14px
            !important;
    }


    body.blog-article-page
    article.reading.prose figure {
        max-width:
            100%
            !important;
    }

}


@media (max-width: 380px) {

    body.blog-article-page {
        --mc-article-mobile-gutter:
            20px;
    }

}



/* ==========================================================
   NET3MAX V5.8.2 TRUE MOBILE EDITORIAL SYSTEM
   ========================================================== */


/*
 * DESKTOP LOCK:
 * all rules in this block are mobile-only.
 */

@media (max-width: 899px) {

    body.blog-article-page {
        --article-mobile-gutter: 24px;
        --article-mobile-text: #344956;
        --article-mobile-heading: #08131c;
        --article-mobile-blue: #0b6097;
    }


    body.blog-article-page,
    body.blog-article-page main#contenido {
        overflow-x: clip !important;
    }


    /* -------------------------------------------------------
       MASTHEAD
       ------------------------------------------------------- */

    body.blog-article-page
    .article-head {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            1.45rem
            var(--article-mobile-gutter)
            .70rem
            !important;

        box-sizing: border-box !important;
    }


    body.blog-article-page
    .article-head > .reading {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    body.blog-article-page
    .article-kicker {
        margin:
            0
            0
            .68rem
            !important;

        color:
            var(--article-mobile-blue)
            !important;

        text-align:
            center
            !important;

        font-size:
            .92rem
            !important;

        line-height:
            1.2
            !important;

        font-weight:
            800
            !important;

        letter-spacing:
            .11em
            !important;
    }


    body.blog-article-page
    .article-title {
        width: 100% !important;

        max-width:
            18ch
            !important;

        margin:
            0 auto .90rem
            !important;

        color:
            var(--article-mobile-heading)
            !important;

        font-size:
            clamp(
                2.18rem,
                8.5vw,
                2.68rem
            )
            !important;

        line-height:
            1.01
            !important;

        letter-spacing:
            -.038em
            !important;

        text-align:
            center
            !important;

        text-wrap:
            balance;
    }


    /* -------------------------------------------------------
       PUBLICATION META
       ------------------------------------------------------- */

    body.blog-article-page
    .article-meta {
        display:
            table
            !important;

        width:
            auto
            !important;

        max-width:
            calc(
                100vw -
                (2 * var(--article-mobile-gutter))
            )
            !important;

        margin:
            0 auto
            !important;

        padding:
            .36rem
            .85rem
            !important;

        border:
            1px solid
            rgba(11, 96, 151, .22)
            !important;

        border-radius:
            999px
            !important;

        background:
            #ffffff
            !important;

        color:
            #617681
            !important;

        font-size:
            .86rem
            !important;

        line-height:
            1.25
            !important;

        font-weight:
            650
            !important;

        text-align:
            center
            !important;
    }


    /* -------------------------------------------------------
       HERO IMAGE
       ------------------------------------------------------- */

    body.blog-article-page
    main#contenido > .article-hero-figure {
        position:
            static
            !important;

        display:
            block
            !important;

        width:
            auto
            !important;

        max-width:
            none
            !important;

        min-width:
            0
            !important;

        margin:
            .90rem
            var(--article-mobile-gutter)
            1.50rem
            !important;

        padding:
            0
            !important;

        left:
            auto
            !important;

        right:
            auto
            !important;

        transform:
            none
            !important;

        box-sizing:
            border-box
            !important;

        overflow:
            hidden
            !important;

        border-radius:
            14px
            !important;
    }


    body.blog-article-page
    main#contenido > .article-hero-figure img {
        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        border-radius:
            14px
            !important;
    }


    /* -------------------------------------------------------
       TRUE MOBILE READING CONTAINER
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose {
        position:
            static
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        min-width:
            0
            !important;

        margin:
            0
            !important;

        padding:
            0
            var(--article-mobile-gutter)
            1.40rem
            !important;

        left:
            auto
            !important;

        right:
            auto
            !important;

        transform:
            none
            !important;

        box-sizing:
            border-box
            !important;

        color:
            var(--article-mobile-text)
            !important;
    }


    /* -------------------------------------------------------
       BODY FIGURES — NO MOBILE BREAKOUT
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose figure,

    body.blog-article-page
    article.reading.prose .article-figure {
        position:
            static
            !important;

        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        min-width:
            0
            !important;

        margin:
            1.35rem 0
            !important;

        padding:
            0
            !important;

        left:
            auto
            !important;

        right:
            auto
            !important;

        transform:
            none
            !important;

        box-sizing:
            border-box
            !important;

        overflow:
            hidden
            !important;

        border-radius:
            13px
            !important;
    }


    body.blog-article-page
    article.reading.prose figure img,

    body.blog-article-page
    article.reading.prose .article-figure img {
        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        object-fit:
            cover
            !important;

        border-radius:
            13px
            !important;
    }


    /* -------------------------------------------------------
       BODY TYPOGRAPHY
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose p,

    body.blog-article-page
    article.reading.prose li {
        max-width:
            none
            !important;

        color:
            var(--article-mobile-text)
            !important;

        font-size:
            1.02rem
            !important;

        line-height:
            1.67
            !important;

        letter-spacing:
            -.004em
            !important;
    }


    body.blog-article-page
    article.reading.prose p {
        margin:
            0 0 1.15rem
            !important;
    }


    body.blog-article-page
    article.reading.prose ul,

    body.blog-article-page
    article.reading.prose ol {
        margin:
            .35rem 0 1.25rem
            !important;

        padding-left:
            1.25rem
            !important;
    }


    /* -------------------------------------------------------
       H2 — MAJOR SECTION
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose h2 {
        width:
            100%
            !important;

        max-width:
            none
            !important;

        margin:
            2rem 0 .78rem
            !important;

        padding:
            0
            !important;

        color:
            var(--article-mobile-heading)
            !important;

        font-size:
            1.48rem
            !important;

        line-height:
            1.14
            !important;

        font-weight:
            800
            !important;

        letter-spacing:
            -.022em
            !important;

        text-align:
            left
            !important;

        text-wrap:
            balance;
    }


    /* -------------------------------------------------------
       H3 / SUBSECTIONS
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose h3,

    body.blog-article-page
    article.reading.prose h4,

    body.blog-article-page
    article.reading.prose h5,

    body.blog-article-page
    article.reading.prose h6 {
        width:
            100%
            !important;

        max-width:
            none
            !important;

        margin:
            1.45rem 0 .58rem
            !important;

        color:
            #17232b
            !important;

        font-size:
            1.12rem
            !important;

        line-height:
            1.28
            !important;

        font-weight:
            750
            !important;

        letter-spacing:
            -.01em
            !important;

        text-align:
            left
            !important;
    }


    /* -------------------------------------------------------
       CALLOUTS / KEYPOINTS
       ------------------------------------------------------- */

    body.blog-article-page
    article.reading.prose blockquote,

    body.blog-article-page
    article.reading.prose
    [class*="keypoint"],

    body.blog-article-page
    article.reading.prose
    [class*="example"],

    body.blog-article-page
    article.reading.prose
    [class*="point"] {
        width:
            100%
            !important;

        max-width:
            100%
            !important;

        margin-left:
            0
            !important;

        margin-right:
            0
            !important;

        box-sizing:
            border-box
            !important;
    }


    /* -------------------------------------------------------
       ARTICLE NAVIGATION
       ------------------------------------------------------- */

    body.blog-article-page
    .article-nav {
        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            0
            var(--article-mobile-gutter)
            !important;

        box-sizing:
            border-box
            !important;
    }


    /* -------------------------------------------------------
       ARTICLE CTA
       ------------------------------------------------------- */

    body.blog-article-page
    .cta-band {
        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            2.15rem
            var(--article-mobile-gutter)
            !important;

        padding:
            1.40rem
            !important;

        box-sizing:
            border-box
            !important;

        border-radius:
            14px
            !important;
    }


    body.blog-article-page
    .cta-band h2,

    body.blog-article-page
    .cta-band h3 {
        color:
            #ffffff
            !important;

        text-align:
            left
            !important;

        font-size:
            1.42rem
            !important;

        line-height:
            1.13
            !important;

        letter-spacing:
            -.022em
            !important;

        margin:
            0 0 .72rem
            !important;
    }


    body.blog-article-page
    .cta-band p {
        color:
            rgba(255,255,255,.92)
            !important;

        font-size:
            .97rem
            !important;

        line-height:
            1.52
            !important;
    }

}


/* ----------------------------------------------------------
   NARROW PHONE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    body.blog-article-page {
        --article-mobile-gutter: 22px;
    }


    body.blog-article-page
    .breadcrumb {
        display:
            none
            !important;
    }


    body.blog-article-page
    .article-head {
        padding-top:
            1.25rem
            !important;
    }


    body.blog-article-page
    .article-title {
        max-width:
            17ch
            !important;

        font-size:
            clamp(
                2.02rem,
                9.5vw,
                2.35rem
            )
            !important;

        line-height:
            1.01
            !important;

        margin-bottom:
            .82rem
            !important;
    }


    body.blog-article-page
    article.reading.prose p,

    body.blog-article-page
    article.reading.prose li {
        font-size:
            1rem
            !important;

        line-height:
            1.66
            !important;
    }


    body.blog-article-page
    article.reading.prose h2 {
        font-size:
            1.40rem
            !important;
    }

}


/* ----------------------------------------------------------
   VERY NARROW PHONE
   ---------------------------------------------------------- */

@media (max-width: 380px) {

    body.blog-article-page {
        --article-mobile-gutter: 20px;
    }


    body.blog-article-page
    .article-title {
        max-width:
            16.5ch
            !important;

        font-size:
            1.96rem
            !important;
    }


    body.blog-article-page
    .article-meta {
        font-size:
            .83rem
            !important;
    }

}



/* ==========================================================
   NET3MAX V5.8.3 MOBILE ARTICLE GEOMETRY LOCK
   ========================================================== */

@media (max-width: 899px) {

    body.blog-article-page {
        --article-safe-x: 22px;
    }


    /*
     * 1. ARTICLE BODY CONTAINER
     */

    body.blog-article-page
    article.reading.prose {

        width: 100% !important;
        max-width: 100% !important;

        margin:
            0
            !important;

        padding:
            0
            var(--article-safe-x)
            1.25rem
            !important;

        box-sizing:
            border-box
            !important;

        overflow:
            visible
            !important;
    }


    /*
     * 2. ROOT CAUSE FIX
     *
     * Historical editorial rules allowed individual direct
     * children to break out of the reading column.
     *
     * Every direct article child is returned to normal flow.
     */

    body.blog-article-page
    article.reading.prose > * {

        position:
            static
            !important;

        left:
            auto
            !important;

        right:
            auto
            !important;

        transform:
            none
            !important;

        width:
            auto
            !important;

        min-width:
            0
            !important;

        max-width:
            100%
            !important;

        margin-left:
            0
            !important;

        margin-right:
            0
            !important;

        box-sizing:
            border-box
            !important;
    }


    /*
     * 3. BODY FIGURES
     */

    body.blog-article-page
    article.reading.prose > figure {

        width:
            100%
            !important;

        margin-top:
            1.25rem
            !important;

        margin-bottom:
            1.45rem
            !important;

        overflow:
            hidden
            !important;

        border-radius:
            12px
            !important;
    }


    body.blog-article-page
    article.reading.prose > figure img {

        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        border-radius:
            12px
            !important;
    }


    /*
     * 4. EXECUTIVE MOBILE TITLE
     */

    body.blog-article-page
    .article-title {

        max-width:
            19ch
            !important;

        margin:
            0 auto .72rem
            !important;

        font-size:
            clamp(
                1.88rem,
                8.2vw,
                2.18rem
            )
            !important;

        line-height:
            1.035
            !important;

        letter-spacing:
            -.035em
            !important;

        text-wrap:
            balance;

        text-align:
            center
            !important;
    }


    /*
     * 5. CLEAN METADATA — NO APP-STYLE PILL
     */

    body.blog-article-page
    .article-meta {

        display:
            block
            !important;

        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            0 auto
            !important;

        padding:
            0
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;

        color:
            #6d7d86
            !important;

        font-size:
            .82rem
            !important;

        line-height:
            1.3
            !important;

        font-weight:
            650
            !important;

        text-align:
            center
            !important;
    }


    /*
     * 6. HERO — SAME SAFE LINE
     */

    body.blog-article-page
    main#contenido >
    .article-hero-figure {

        width:
            auto
            !important;

        max-width:
            none
            !important;

        margin:
            1.05rem
            var(--article-safe-x)
            1.45rem
            !important;

        border-radius:
            12px
            !important;

        overflow:
            hidden
            !important;
    }


    /*
     * 7. BODY TYPOGRAPHY
     */

    body.blog-article-page
    article.reading.prose p,

    body.blog-article-page
    article.reading.prose li {

        font-size:
            1rem
            !important;

        line-height:
            1.64
            !important;

        color:
            #344956
            !important;
    }


    body.blog-article-page
    article.reading.prose p {

        margin-top:
            0
            !important;

        margin-bottom:
            1.05rem
            !important;
    }


    /*
     * 8. MAJOR HEADINGS
     */

    body.blog-article-page
    article.reading.prose h2 {

        margin:
            1.85rem
            0
            .68rem
            !important;

        font-size:
            1.38rem
            !important;

        line-height:
            1.15
            !important;

        letter-spacing:
            -.025em
            !important;

        text-align:
            left
            !important;
    }


    body.blog-article-page
    article.reading.prose h3 {

        margin:
            1.30rem
            0
            .48rem
            !important;

        font-size:
            1.08rem
            !important;

        line-height:
            1.25
            !important;

        letter-spacing:
            -.012em
            !important;

        text-align:
            left
            !important;
    }


    /*
     * 9. LISTS
     */

    body.blog-article-page
    article.reading.prose ul,

    body.blog-article-page
    article.reading.prose ol {

        padding-left:
            1.20rem
            !important;

        margin:
            .35rem 0 1.10rem
            !important;
    }


    /*
     * 10. ARTICLE NAV
     */

    body.blog-article-page
    .article-nav {

        margin-left:
            var(--article-safe-x)
            !important;

        margin-right:
            var(--article-safe-x)
            !important;
    }


    /*
     * 11. DARK CTA
     */

    body.blog-article-page
    .cta-band {

        margin-left:
            var(--article-safe-x)
            !important;

        margin-right:
            var(--article-safe-x)
            !important;

        padding:
            1.35rem
            !important;

        border-radius:
            13px
            !important;
    }


    body.blog-article-page
    .cta-band h1,

    body.blog-article-page
    .cta-band h2,

    body.blog-article-page
    .cta-band h3,

    body.blog-article-page
    .cta-band h4,

    body.blog-article-page
    [class*="cta"] h2,

    body.blog-article-page
    [class*="cta"] h3 {

        color:
            #ffffff
            !important;

        -webkit-text-fill-color:
            #ffffff
            !important;
    }

}


@media (max-width: 480px) {

    body.blog-article-page {
        --article-safe-x: 20px;
    }


    body.blog-article-page
    .breadcrumb {

        display:
            none
            !important;
    }


    body.blog-article-page
    .article-title {

        font-size:
            clamp(
                1.82rem,
                8.6vw,
                2.05rem
            )
            !important;

        max-width:
            18ch
            !important;
    }

}


@media (max-width: 360px) {

    body.blog-article-page {
        --article-safe-x: 18px;
    }


    body.blog-article-page
    .article-title {

        font-size:
            1.80rem
            !important;
    }

}



/* ==========================================================
   NET3MAX V5.8.4 MOBILE ROOT GUTTER LOCK

   Architecture:
   viewport
     -> main#contenido owns horizontal safe area
       -> all article components consume 100% of safe area

   Important:
   - mobile only
   - desktop untouched
   ========================================================== */

@media (max-width: 700px) {

  body.blog-article-page {
    overflow-x: clip;
  }


  /*
   * SINGLE OWNER OF MOBILE HORIZONTAL GUTTER
   *
   * 360px viewport:
   * 360 - 24 - 24 = 312px usable editorial width
   */
  body.blog-article-page main#contenido {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 24px !important;
    padding-right: 24px !important;

    box-sizing: border-box !important;
  }


  /*
   * ARTICLE WRAPPERS MAY NOT CREATE A SECOND
   * VIEWPORT-BASED WIDTH OR NEGATIVE BREAKOUT.
   */
  body.blog-article-page main#contenido .article-head,
  body.blog-article-page main#contenido .article-head > .reading,
  body.blog-article-page main#contenido .article-hero,
  body.blog-article-page main#contenido .article-hero-figure,
  body.blog-article-page main#contenido .section,
  body.blog-article-page main#contenido .section-soft,
  body.blog-article-page main#contenido article.reading.prose,
  body.blog-article-page main#contenido .article-nav {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;
  }


  /*
   * BODY ELEMENTS REMAIN INSIDE THE SAME SAFE COLUMN.
   */
  body.blog-article-page main#contenido article.reading.prose > p,
  body.blog-article-page main#contenido article.reading.prose > h2,
  body.blog-article-page main#contenido article.reading.prose > h3,
  body.blog-article-page main#contenido article.reading.prose > h4,
  body.blog-article-page main#contenido article.reading.prose > ul,
  body.blog-article-page main#contenido article.reading.prose > ol,
  body.blog-article-page main#contenido article.reading.prose > blockquote,
  body.blog-article-page main#contenido article.reading.prose > figure {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * NO ARTICLE IMAGE MAY ESCAPE THE READING GUTTER.
   */
  body.blog-article-page main#contenido .article-figure,
  body.blog-article-page main#contenido .article-hero-figure {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  body.blog-article-page main#contenido .article-figure img,
  body.blog-article-page main#contenido .article-hero-figure img,
  body.blog-article-page main#contenido article.reading.prose img {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
  }


  /*
   * TEXT MUST NEVER OVERRUN THE SAFE COLUMN.
   */
  body.blog-article-page main#contenido p,
  body.blog-article-page main#contenido h1,
  body.blog-article-page main#contenido h2,
  body.blog-article-page main#contenido h3,
  body.blog-article-page main#contenido h4,
  body.blog-article-page main#contenido li {

    max-width: 100% !important;

    overflow-wrap: break-word;
    word-wrap: break-word;
  }

}


/*
 * VERY NARROW PHONES:
 * retain generous but practical reading width.
 */
@media (max-width: 380px) {

  body.blog-article-page main#contenido {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}

/* END NET3MAX V5.8.4 MOBILE ROOT GUTTER LOCK */




/* ==========================================================
   NET3MAX V5.8.5 R1 DESKTOP EXECUTIVE ARTICLE CTA

   Desktop only.
   V5.8.4 mobile remains completely untouched.
   ========================================================== */

@media (min-width: 701px) {

  body.blog-article-page .cta-band {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;

    padding:
      clamp(2.55rem, 4vw, 3.35rem)
      clamp(3rem, 6vw, 5rem)
      !important;
  }


  /*
   * MAIN CTA MESSAGE
   */
  body.blog-article-page
  .cta-band
  .article-cta-title {

    width: 100% !important;
    max-width: 24ch !important;

    margin:
      0 auto .85rem
      !important;

    color:
      #ffffff
      !important;

    -webkit-text-fill-color:
      #ffffff
      !important;

    font-size:
      clamp(1.85rem, 2.3vw, 2.35rem)
      !important;

    line-height:
      1.08
      !important;

    letter-spacing:
      -.025em
      !important;

    text-align:
      center
      !important;

    text-wrap: balance;
  }


  /*
   * SUPPORTING COPY IS PART OF SAME VISUAL UNIT.
   */
  body.blog-article-page
  .cta-band
  .article-cta-title + p {

    width: 100% !important;
    max-width: 620px !important;

    margin:
      0 auto 1.4rem
      !important;

    color:
      rgba(255,255,255,.90)
      !important;

    -webkit-text-fill-color:
      rgba(255,255,255,.90)
      !important;

    font-size:
      1.06rem
      !important;

    line-height:
      1.55
      !important;

    font-weight:
      450
      !important;

    text-align:
      center
      !important;

    text-wrap: pretty;
  }


  /*
   * ACTION STAYS ON SAME CENTRAL AXIS.
   */
  body.blog-article-page
  .cta-band
  .actions {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin:
      0
      !important;
  }


  body.blog-article-page
  .cta-band
  .actions
  .btn {

    margin:
      0 auto
      !important;
  }

}

/* END NET3MAX V5.8.5 R1 DESKTOP EXECUTIVE ARTICLE CTA */




/* ==========================================================
   NET3MAX V5.8.6 HOME SERVICES FINAL HIERARCHY

   One message only:
   "Soluciones pensadas para cada etapa de crecimiento."

   Home page only because class exists only on index.html.
   ========================================================== */

.services-section .section-head {

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;
}


.services-section
.home-services-final-title {

  width: 100% !important;

  max-width: 900px !important;

  margin:
    0 auto
    clamp(1.85rem, 3vw, 2.4rem)
    !important;

  font-size:
    clamp(2.55rem, 3.35vw, 3.35rem)
    !important;

  line-height:
    1.04
    !important;

  letter-spacing:
    -.035em
    !important;

  text-align:
    center
    !important;

  text-wrap:
    balance;
}


@media (max-width: 700px) {

  .services-section
  .home-services-final-title {

    max-width:
      19ch
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      auto
      !important;

    margin-bottom:
      1.55rem
      !important;

    font-size:
      clamp(2rem, 8vw, 2.55rem)
      !important;

    line-height:
      1.05
      !important;

    letter-spacing:
      -.03em
      !important;

    text-align:
      center
      !important;
  }

}

/* END NET3MAX V5.8.6 HOME SERVICES FINAL HIERARCHY */




/* ==========================================================
   NET3MAX V5.8.7 HOME SERVICES TRUE CENTER

   FINAL TITLE:
   Soluciones pensadas para cada etapa de crecimiento

   FINAL PERIOD = NO
   ALIGNMENT = TRUE CENTER
   SIZE = SLIGHTLY LARGER
   ========================================================== */


.services-section .section-head {

  display: flex !important;

  flex-direction:
    column
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  width:
    100%
    !important;

  max-width:
    100%
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;

  text-align:
    center
    !important;
}


.services-section
.home-services-final-title {

  display:
    block
    !important;

  width:
    100%
    !important;

  max-width:
    980px
    !important;

  margin:
    0 auto
    clamp(1.95rem, 3vw, 2.50rem)
    !important;

  font-size:
    clamp(2.80rem, 3.60vw, 3.60rem)
    !important;

  line-height:
    1.03
    !important;

  letter-spacing:
    -.038em
    !important;

  text-align:
    center
    !important;

  text-wrap:
    balance
    !important;
}


@media (max-width: 700px) {

  .services-section
  .section-head {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    align-items:
      center
      !important;

    justify-content:
      center
      !important;

    width:
      100%
      !important;

    text-align:
      center
      !important;
  }


  .services-section
  .home-services-final-title {

    width:
      100%
      !important;

    max-width:
      19ch
      !important;

    margin:
      0 auto
      1.65rem
      !important;

    font-size:
      clamp(2.15rem, 8.50vw, 2.70rem)
      !important;

    line-height:
      1.04
      !important;

    letter-spacing:
      -.032em
      !important;

    text-align:
      center
      !important;

    text-wrap:
      balance
      !important;
  }

}


/* END NET3MAX V5.8.7 HOME SERVICES TRUE CENTER */




/* ==========================================================
   NET3MAX V5.8.8 HOME SERVICES SINGLE-LINE DESKTOP TITLE

   >=1100px:
   ONE line

   701px–1099px:
   natural centered wrapping

   <=700px:
   existing mobile responsive composition
   ========================================================== */


/*
 * GENERAL / TABLET
 *
 * Keep the title centered but allow natural wrapping.
 */
.services-section
.home-services-final-title {

  width:
    100%
    !important;

  max-width:
    1180px
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;

  text-align:
    center
    !important;
}


/*
 * WIDE DESKTOP
 *
 * The available service-grid width is used intentionally.
 * One executive line instead of two.
 */
@media (min-width: 1100px) {

  .services-section
  .home-services-final-title {

    width:
      max-content
      !important;

    max-width:
      calc(100vw - 12rem)
      !important;

    margin:
      0 auto
      2.35rem
      !important;

    font-size:
      clamp(2.75rem, 3.00vw, 3.20rem)
      !important;

    line-height:
      1
      !important;

    letter-spacing:
      -.038em
      !important;

    white-space:
      nowrap
      !important;

    text-align:
      center
      !important;

    text-wrap:
      nowrap
      !important;
  }

}


/*
 * TABLET
 *
 * Do NOT force nowrap. This prevents horizontal overflow.
 */
@media (min-width: 701px) and (max-width: 1099px) {

  .services-section
  .home-services-final-title {

    width:
      100%
      !important;

    max-width:
      900px
      !important;

    margin:
      0 auto
      2rem
      !important;

    font-size:
      clamp(2.50rem, 4.40vw, 3rem)
      !important;

    line-height:
      1.04
      !important;

    white-space:
      normal
      !important;

    text-align:
      center
      !important;
  }

}


/*
 * MOBILE
 *
 * Preserve responsive readability.
 */
@media (max-width: 700px) {

  .services-section
  .home-services-final-title {

    width:
      100%
      !important;

    max-width:
      19ch
      !important;

    margin:
      0 auto
      1.65rem
      !important;

    font-size:
      clamp(2.15rem, 8.50vw, 2.70rem)
      !important;

    line-height:
      1.04
      !important;

    white-space:
      normal
      !important;

    text-align:
      center
      !important;
  }

}


/* END NET3MAX V5.8.8 HOME SERVICES SINGLE-LINE DESKTOP TITLE */




/* ==========================================================
   NET3MAX V5.8.9 R3 FINAL HOME GEOMETRY
   ========================================================== */


/* ==========================================================
   A. SERVICES HEADING
   ========================================================== */


/*
 * Make the actual heading branch consume the COMPLETE
 * services-layout row.
 *
 * grid-column handles GRID parents.
 * flex-basis handles FLEX parents.
 * width handles ordinary BLOCK parents.
 */
.home-v589r3
.home-services-head-v589r3 {

  box-sizing:
    border-box
    !important;

  grid-column:
    1 / -1
    !important;

  flex:
    0 0 100%
    !important;

  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;

  padding-left:
    0
    !important;

  padding-right:
    0
    !important;

  text-align:
    center
    !important;

  transform:
    none
    !important;
}


.home-v589r3
.home-services-title-v589r3 {

  display:
    block
    !important;

  box-sizing:
    border-box
    !important;

  width:
    100%
    !important;

  max-width:
    1248px
    !important;

  margin:
    0 auto
    2.25rem
    !important;

  padding:
    0
    !important;

  text-align:
    center
    !important;

  transform:
    none
    !important;
}


@media (min-width: 1100px) {

  .home-v589r3
  .home-services-title-v589r3 {

    font-size:
      clamp(2.75rem, 3vw, 3.20rem)
      !important;

    line-height:
      1
      !important;

    letter-spacing:
      -.038em
      !important;

    white-space:
      nowrap
      !important;

    text-wrap:
      nowrap
      !important;
  }

}


@media (min-width: 701px) and (max-width: 1099px) {

  .home-v589r3
  .home-services-title-v589r3 {

    max-width:
      900px
      !important;

    white-space:
      normal
      !important;

    text-wrap:
      balance
      !important;
  }

}


@media (max-width: 700px) {

  .home-v589r3
  .home-services-title-v589r3 {

    max-width:
      19ch
      !important;

    margin:
      0 auto
      1.65rem
      !important;

    font-size:
      clamp(2.15rem, 8.5vw, 2.70rem)
      !important;

    line-height:
      1.04
      !important;

    white-space:
      normal
      !important;

    text-wrap:
      balance
      !important;
  }

}


/* ==========================================================
   B. FINAL CTA — DESKTOP ONLY
   ========================================================== */


@media (min-width: 900px) {

  /*
   * Real blue rectangle.
   */
  .home-v589r3
  .home-final-cta-v589r3 {

    box-sizing:
      border-box
      !important;

    display:
      grid
      !important;

    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 2fr)
      !important;

    grid-template-rows:
      auto auto
      !important;

    column-gap:
      clamp(2rem, 4vw, 4.5rem)
      !important;

    align-items:
      center
      !important;
  }


  /*
   * Exact title.
   */
  .home-v589r3
  .home-final-cta-title-v589r3 {

    margin-top:
      0
      !important;
  }


  /*
   * Exact copy.
   */
  .home-v589r3
  .home-final-cta-copy-v589r3 {

    margin-bottom:
      0
      !important;
  }


  /*
   * ACTION WRAPPER MODE
   *
   * Real wrapper becomes entire right 40% cell.
   */
  .home-v589r3.home-cta-action-wrapper-v589r3
  .home-final-cta-action-branch-v589r3 {

    grid-column:
      2
      !important;

    grid-row:
      1 / 3
      !important;

    box-sizing:
      border-box
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    justify-content:
      center
      !important;

    align-self:
      stretch
      !important;

    justify-self:
      stretch
      !important;

    width:
      100%
      !important;

    height:
      100%
      !important;

    min-width:
      0
      !important;

    margin:
      0
      !important;

    padding:
      1rem
      !important;
  }


  .home-v589r3.home-cta-action-wrapper-v589r3
  .home-final-cta-button-v589r3 {

    margin:
      0 auto
      !important;

    align-self:
      center
      !important;
  }


  /*
   * DIRECT-LINK MODE
   *
   * If the <a> itself is a direct grid item,
   * do NOT stretch the button.
   *
   * Simply place the normal button in the center
   * of the complete right grid cell.
   */
  .home-v589r3.home-cta-action-direct-v589r3
  .home-final-cta-button-v589r3 {

    grid-column:
      2
      !important;

    grid-row:
      1 / 3
      !important;

    justify-self:
      center
      !important;

    align-self:
      center
      !important;

    margin:
      0
      !important;
  }


  /*
   * GROUPED TEXT MODE
   *
   * Existing shared title+paragraph wrapper goes in left 60%.
   */
  .home-v589r3.home-cta-text-grouped-v589r3
  .home-final-cta-title-branch-v589r3 {

    grid-column:
      1
      !important;

    grid-row:
      1 / 3
      !important;

    align-self:
      center
      !important;

    justify-self:
      stretch
      !important;

    min-width:
      0
      !important;

    margin:
      0
      !important;
  }


  /*
   * SPLIT TEXT MODE
   *
   * Title and paragraph are independent direct children.
   * This is the structure R2 detected.
   */
  .home-v589r3.home-cta-text-split-v589r3
  .home-final-cta-title-branch-v589r3 {

    grid-column:
      1
      !important;

    grid-row:
      1
      !important;

    align-self:
      end
      !important;

    justify-self:
      stretch
      !important;

    min-width:
      0
      !important;

    margin:
      0
      !important;
  }


  .home-v589r3.home-cta-text-split-v589r3
  .home-final-cta-copy-branch-v589r3 {

    grid-column:
      1
      !important;

    grid-row:
      2
      !important;

    align-self:
      start
      !important;

    justify-self:
      stretch
      !important;

    min-width:
      0
      !important;

    margin:
      0
      !important;
  }

}


/* END NET3MAX V5.8.9 R3 FINAL HOME GEOMETRY */




/* ==========================================================
   NET3MAX V5.8.10 TRUE SERVICES TITLE CENTERING

   ROOT CAUSE:
   H2 was centered inside legacy partial-width wrappers.

   FIX:
   Normalize every title-only ancestor between H2 and the
   actual 8-card services root.
   ========================================================== */


/*
 * EVERY intermediate wrapper contains only the heading.
 *
 * Therefore it is safe to flatten its horizontal geometry.
 */
.home-v5810
.home-services-center-chain-v5810 {

  box-sizing:
    border-box
    !important;

  display:
    block
    !important;

  position:
    static
    !important;

  grid-column:
    1 / -1
    !important;

  grid-row:
    auto
    !important;

  justify-self:
    stretch
    !important;

  align-self:
    auto
    !important;

  flex:
    0 0 100%
    !important;

  flex-basis:
    100%
    !important;

  width:
    100%
    !important;

  min-width:
    0
    !important;

  max-width:
    100%
    !important;

  margin-left:
    0
    !important;

  margin-right:
    0
    !important;

  padding-left:
    0
    !important;

  padding-right:
    0
    !important;

  left:
    auto
    !important;

  right:
    auto
    !important;

  transform:
    none
    !important;

  text-align:
    center
    !important;
}


/*
 * Exact H2.
 *
 * Now its containing box is the FULL services geometry.
 */
.home-v5810
.home-services-title-v5810 {

  box-sizing:
    border-box
    !important;

  display:
    block
    !important;

  position:
    static
    !important;

  width:
    100%
    !important;

  min-width:
    0
    !important;

  max-width:
    none
    !important;

  margin:
    0 auto
    2.25rem
    !important;

  padding:
    0
    !important;

  left:
    auto
    !important;

  right:
    auto
    !important;

  transform:
    none
    !important;

  text-align:
    center
    !important;
}


/*
 * Approved desktop composition:
 * single line.
 */
@media (min-width: 1100px) {

  .home-v5810
  .home-services-title-v5810 {

    font-size:
      clamp(2.75rem, 3vw, 3.20rem)
      !important;

    line-height:
      1
      !important;

    letter-spacing:
      -.038em
      !important;

    white-space:
      nowrap
      !important;

    text-wrap:
      nowrap
      !important;
  }

}


/*
 * Tablet:
 * center remains true, wrapping allowed.
 */
@media (min-width: 701px) and (max-width: 1099px) {

  .home-v5810
  .home-services-title-v5810 {

    max-width:
      900px
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      auto
      !important;

    white-space:
      normal
      !important;

    text-wrap:
      balance
      !important;
  }

}


/*
 * Mobile remains responsive.
 */
@media (max-width: 700px) {

  .home-v5810
  .home-services-title-v5810 {

    max-width:
      19ch
      !important;

    margin:
      0 auto
      1.65rem
      !important;

    font-size:
      clamp(2.15rem, 8.5vw, 2.70rem)
      !important;

    line-height:
      1.04
      !important;

    letter-spacing:
      -.032em
      !important;

    white-space:
      normal
      !important;

    text-wrap:
      balance
      !important;
  }

}


/* END NET3MAX V5.8.10 TRUE SERVICES TITLE CENTERING */




/* ==========================================================
   NET3MAX V5.8.11 FINAL TRUE VISUAL CENTERING

   A) services H2:
      center the H2 BOX itself, not only text inside it.

   B) final CTA:
      center title + paragraph in left 60%.
      button remains centered in right 40%.
   ========================================================== */


/* ==========================================================
   A. SERVICES TITLE — TRUE GEOMETRIC CENTER
   ========================================================== */


/*
 * Stronger specificity than all previous class-only rules.
 *
 * Every intermediate wrapper has already been VERIFIED
 * to contain only this title.
 */
body.home-v5810
main#contenido
.home-services-center-chain-v5810 {

    box-sizing:
        border-box
        !important;

    display:
        block
        !important;

    position:
        static
        !important;

    grid-column:
        1 / -1
        !important;

    grid-row:
        auto
        !important;

    justify-self:
        stretch
        !important;

    align-self:
        auto
        !important;

    flex:
        0 0 100%
        !important;

    flex-basis:
        100%
        !important;

    width:
        100%
        !important;

    min-width:
        100%
        !important;

    max-width:
        100%
        !important;

    margin-left:
        0
        !important;

    margin-right:
        0
        !important;

    padding-left:
        0
        !important;

    padding-right:
        0
        !important;

    left:
        auto
        !important;

    right:
        auto
        !important;

    transform:
        none
        !important;

    text-align:
        center
        !important;
}


/*
 * KEY CHANGE:
 *
 * The heading itself no longer consumes a mysterious
 * inherited partial-width box.
 *
 * It becomes only as wide as its text, then THAT BOX
 * is centered with auto margins / justify-self.
 */
body.home-v5810
main#contenido
.home-services-title-v5810 {

    box-sizing:
        border-box
        !important;

    display:
        block
        !important;

    position:
        static
        !important;

    width:
        max-content
        !important;

    min-width:
        0
        !important;

    max-width:
        calc(100% - 2px)
        !important;

    margin-top:
        0
        !important;

    margin-right:
        auto
        !important;

    margin-bottom:
        2.25rem
        !important;

    margin-left:
        auto
        !important;

    padding:
        0
        !important;

    justify-self:
        center
        !important;

    left:
        auto
        !important;

    right:
        auto
        !important;

    transform:
        none
        !important;

    text-align:
        center
        !important;
}


@media (min-width: 1100px) {

    body.home-v5810
    main#contenido
    .home-services-title-v5810 {

        width:
            max-content
            !important;

        max-width:
            calc(100% - 2px)
            !important;

        white-space:
            nowrap
            !important;

        text-wrap:
            nowrap
            !important;
    }

}


@media (max-width: 1099px) {

    body.home-v5810
    main#contenido
    .home-services-title-v5810 {

        width:
            min(100%, 19ch)
            !important;

        max-width:
            19ch
            !important;

        white-space:
            normal
            !important;

        text-wrap:
            balance
            !important;
    }

}


/* ==========================================================
   B. FINAL HOME CTA — TRUE CENTER OF BOTH REGIONS
   ========================================================== */


@media (min-width: 900px) {

    /*
     * Preserve 60/40 desktop architecture.
     *
     * Two intrinsic text rows are centered vertically
     * as ONE block using align-content:center.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-v589r3 {

        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 3fr)
            minmax(0, 2fr)
            !important;

        grid-template-rows:
            auto auto
            !important;

        align-content:
            center
            !important;

        align-items:
            center
            !important;

        column-gap:
            clamp(2rem, 4vw, 4.5rem)
            !important;

        row-gap:
            .55rem
            !important;
    }


    /*
     * TITLE BRANCH:
     * full left-region width + centered.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-title-branch-v589r3 {

        box-sizing:
            border-box
            !important;

        display:
            block
            !important;

        grid-column:
            1
            !important;

        grid-row:
            1
            !important;

        align-self:
            end
            !important;

        justify-self:
            stretch
            !important;

        width:
            100%
            !important;

        min-width:
            0
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        text-align:
            center
            !important;
    }


    /*
     * EXACT TITLE.
     *
     * Center its own content box inside left 60%.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-title-v589r3 {

        display:
            block
            !important;

        width:
            min(100%, 20ch)
            !important;

        max-width:
            20ch
            !important;

        margin:
            0 auto
            !important;

        padding:
            0
            !important;

        text-align:
            center
            !important;
    }


    /*
     * COPY BRANCH:
     * full left-region width + centered.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-copy-branch-v589r3 {

        box-sizing:
            border-box
            !important;

        display:
            block
            !important;

        grid-column:
            1
            !important;

        grid-row:
            2
            !important;

        align-self:
            start
            !important;

        justify-self:
            stretch
            !important;

        width:
            100%
            !important;

        min-width:
            0
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        text-align:
            center
            !important;
    }


    /*
     * EXACT SUPPORTING COPY.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-copy-v589r3 {

        display:
            block
            !important;

        width:
            min(100%, 48ch)
            !important;

        max-width:
            48ch
            !important;

        margin:
            0 auto
            !important;

        padding:
            0
            !important;

        text-align:
            center
            !important;
    }


    /*
     * RIGHT ACTION REGION.
     *
     * Because we changed the text area to two centered rows,
     * explicitly span the action across BOTH rows.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-action-branch-v589r3 {

        grid-column:
            2
            !important;

        grid-row:
            1 / 3
            !important;

        align-self:
            stretch
            !important;

        justify-self:
            stretch
            !important;

        display:
            flex
            !important;

        align-items:
            center
            !important;

        justify-content:
            center
            !important;

        width:
            100%
            !important;

        height:
            100%
            !important;

        margin:
            0
            !important;

        padding:
            1rem
            !important;
    }


    /*
     * Button itself stays its natural size
     * at the true center of right 40%.
     */
    body.home-v5810.home-cta-text-split-v589r3
    main#contenido
    .home-final-cta-button-v589r3 {

        justify-self:
            center
            !important;

        align-self:
            center
            !important;

        margin:
            0 auto
            !important;
    }

}


/* END NET3MAX V5.8.11 FINAL TRUE VISUAL CENTERING */