/* xgrowth.co site-wide design layer (ported verbatim from the .co WPCodeBox CSS
   + the .co homepage per-page header/footer colours + .co global custom CSS).
   Design only: no content. Keep in sync with .co when its design changes. */

.main-contact-form{
  --xg-red: #D90041;
  --xg-purple: #270156;
}



/* ---- Form layout ----------------------------------------------------
   The form is left transparent so it sits on your existing dark CTA
   section. If you ever place it on a light background, uncomment the
   background / padding / border-radius lines below to turn it into a
   self-contained purple card.                                          */
.main-contact-form {
  font-family: 'Inter', sans-serif;
  /* background: var(--xg-purple); */
  /* padding: 40px; */
  /* border-radius: 16px; */
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 50px;
}

/* Kill CF7's stray paragraph spacing / empty <p> tags */
.main-contact-form p { margin: 0; }
.main-contact-form p:empty { display: none; }

/* ---- Field wrappers -------------------------------------------------- */
.form-group,
.download-ebook-row2 > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wpcf7-form-control-wrap { display: block; }

/* Two-column First / Last name row */
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Labels ---------------------------------------------------------- */
.labeltext {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  line-height: 1.3;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

/* ---- Text inputs + textarea ----------------------------------------- */
input.wpcf7-text,
input.wpcf7-email,
textarea.wpcf7-textarea {
  width: 100% !important;
  background: rgba(255,255,255,1) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: #270156 !important;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

textarea.wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #2701567d;
  opacity: 1;
}

input.wpcf7-text:hover,
input.wpcf7-email:hover,
textarea.wpcf7-textarea:hover {
  border-color: rgba(217,0,65,0.40) !important;
  background: rgba(255,255,255,0.9) !important;
}

input.wpcf7-text:focus,
input.wpcf7-email:focus,
textarea.wpcf7-textarea:focus {
  border-color: var(--xg-red) !important;
  background: rgba(255,255,255,1) !important;
  box-shadow: 0 0 0 3px rgba(217,0,65,0.16) !important;
  color: #270156!important;
}

/* Keep dark theme when the browser autofills */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  //-webkit-text-fill-color: #fff;
  // -webkit-box-shadow: 0 0 0 1000px #34106b inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- Custom checkbox (Subscribe to xG weekly) ----------------------- */
.wpcf7-checkbox .wpcf7-list-item { margin: 0; }

.wpcf7-checkbox label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.wpcf7-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wpcf7-checkbox .wpcf7-list-item-label {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
}

.wpcf7-checkbox .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  transition: background .15s ease, border-color .15s ease;
}

.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background: var(--xg-red);
  border-color: var(--xg-red);
}

/* Checkmark */
.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 49%;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

.wpcf7-checkbox input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
  box-shadow: 0 0 0 3px rgba(217,0,65,0.30);
}

/* ---- Submit row ------------------------------------------------------ */
.book-now-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.warranty-div { order: 1; }
.submit-container { order: 2; position: relative; display: inline-flex; align-items: center; }

.warranty-div img { max-height: 44px; width: auto; display: block; }

input.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  background: var(--xg-red) !important;
  color: #fff!important;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  height: 42px;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .2s ease, transform .2s ease;
}
input.wpcf7-submit:hover{
    cursor: pointer;
}

input.wpcf7-submit:hover { opacity: 0.95; transform: translateY(-1px); }
input.wpcf7-submit:active { opacity: 1; transform: translateY(0); }

/* ---- Validation + response messages --------------------------------- */
.wpcf7-not-valid {
  border-color: #D90041 !important;
  background: rgba(217,0,65,0.10) !important;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #FF6B8A;
}

.wpcf7-response-output {
  margin: 8px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
form.invalid .wpcf7-response-output,
form.failed .wpcf7-response-output {
  border-color: rgba(217,0,65,0.45) !important;
  color: #FF6B8A;
}

/* Spinner colour */
.wpcf7-spinner { background-color: rgba(255,255,255,0.6); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 540px) {
  .main-contact-form { padding: 28px 20px; }
  .name-row { grid-template-columns: 1fr; gap: 18px; }
  .book-now-btn { flex-direction: column-reverse; align-items: stretch; }
  input.wpcf7-submit { justify-content: center; width: 100%; }
  .warranty-div { text-align: center; }
}

  .xgf-cta-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .xgf-privacy {
    font-size: 12px;
    color: rgba(255,255,255,0.42);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
  }

  .xgf-privacy svg { width: 11px; height: 11px; fill: rgba(255,255,255,0.30); flex-shrink: 0; }

  .xgf-privacy a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    transition: color .2s, border-color .2s;
  }

  .xgf-privacy a:hover { color: #fff; border-bottom-color: #fff; }


.xgf-optional {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 2px 7px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    max-width: 80px;
  }
/* =====================================================================
   Growth Resources page (/resources/, page ID 893) — new "Resource Wall" design
   Tokens + base from case-studies.css (subset, no global header override)
   and page-local .rw-* rules from the design, all scoped to page 893.
   ===================================================================== */

.page-id-893 .cs-page {
  --deep:#23044C; --navy:#262946; --coral:#D90041; --coral-2:#FD625E;
  --cream:#E4EAF1; --paper:#FFFFFF; --ink:#1A1B2E; --ink-2:#4F5167;
  --ink-3:#8B8D9F; --rule:rgba(26,27,46,0.10); --r:14px;
  margin:0 !important; padding:0 !important; width:100%; max-width:none !important;
  background:var(--cream);
  font-family:'Inter',-apple-system,sans-serif; color:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.page-id-893 .cs-page *, .page-id-893 .cs-page *::before, .page-id-893 .cs-page *::after { box-sizing:border-box; }

/* Neutralise block-editor flow/gap spacing on the wrapper groups */
.page-id-893 .cs-page.wp-block-group > *,
.page-id-893 .cs-page .rw-section > *,
.page-id-893 .cs-page .container > *,
.page-id-893 .cs-page .rw-case-grid > * { margin-block-start:0; }
.page-id-893 .wp-block-post-content:has(> .cs-page) { padding:0 !important; margin:0 !important; max-width:none !important; }
.page-id-893 .wp-block-post-content > .cs-page { margin-block:0 !important; }

.page-id-893 .cs-page .container { max-width:1240px; margin:0 auto; padding:0 32px; }
.page-id-893 .cs-page .label { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.page-id-893 .cs-page .topbar__cta { display:inline-flex; align-items:center; gap:8px; background:var(--coral); color:#fff; text-decoration:none; font-size:13px; font-weight:600; padding:10px 20px; border-radius:999px; transition:background .2s; }
.page-id-893 .cs-page .topbar__cta:hover { background:var(--coral-2); color:#fff; }
@media (max-width:768px) { .page-id-893 .cs-page .container { padding:0 20px; } }

/* ── Sections ── */
.page-id-893 .cs-page .rw-section { padding:72px 0 100px; margin:0; }
.page-id-893 .cs-page .rw-section--white { background:var(--paper); }
.page-id-893 .cs-page .rw-section--latest { padding:72px 0 40px; }
.page-id-893 .cs-page .rw-section--newsletter { padding:40px 0; background:var(--paper); }
.page-id-893 .cs-page .rw-head { max-width:620px; margin:0 0 40px; }
.page-id-893 .cs-page .rw-head h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(26px,2.8vw,34px); font-weight:600; color:var(--ink); margin:0; line-height:1.2; letter-spacing:normal; }
.page-id-893 .cs-page .rw-page-title { font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:clamp(30px,4vw,44px); line-height:1.2; letter-spacing:normal; color:var(--ink); margin:0 0 32px; }

/* ── Latest Articles (shortcode [xg_latest_articles]) ── */
.page-id-893 .cs-page .rw-latest-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
@media (max-width:900px) { .page-id-893 .cs-page .rw-latest-grid { grid-template-columns:1fr; } }
.page-id-893 .cs-page .rw-featured { display:flex; }
.page-id-893 .cs-page .rw-featured .xg-blog-grid__card { flex:1; }
.page-id-893 .cs-page .rw-featured .xg-blog-grid__card-content { flex:1; justify-content:center; }
.page-id-893 .cs-page .rw-featured .rw-card-image { aspect-ratio:16/9; }
.page-id-893 .cs-page .rw-list { display:flex; flex-direction:column; gap:16px; }
.page-id-893 .cs-page .rw-list-post { display:flex; gap:16px; border-radius:12px; overflow:hidden; text-decoration:none; background:var(--deep); }
.page-id-893 .cs-page .rw-list-post__image { width:140px; flex-shrink:0; aspect-ratio:4/3; background-position:50%; background-repeat:no-repeat; background-size:cover; }
.page-id-893 .cs-page .rw-list-post__content { padding:14px 18px; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.page-id-893 .cs-page .rw-list-post .xg-blog-grid__title { font-size:16px; -webkit-line-clamp:2; }
.page-id-893 .cs-page .rw-list-post .xg-blog-grid__excerpt { font-size:13px; -webkit-line-clamp:2; }
@media (max-width:480px) { .page-id-893 .cs-page .rw-list-post__image { width:96px; } }

/* ── Blog cards: image zone + solid navy text zone ── */
.page-id-893 .cs-page .xg-blog-grid__card { background:none; justify-content:flex-start; min-height:0; }
.page-id-893 .cs-page .rw-card-image { aspect-ratio:16/10; background-position:50%; background-repeat:no-repeat; background-size:cover; }
.page-id-893 .cs-page .xg-blog-grid__card-content { background:var(--deep); }

/* Real xgrowth/blog-grid block: featured image is an inline background-image
   on the <a>. Hide it on the card and repaint it in a ::before image zone. */
.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__card { background-color:transparent; background-size:0 0; }
.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__card::before {
  content:""; display:block; flex-shrink:0; aspect-ratio:16/10;
  background-color:#23044C; background-image:inherit;
  background-position:50%; background-repeat:no-repeat; background-size:cover;
}
.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__card:not([style*="background-image"])::before { background-image:linear-gradient(160deg,#2c1960 0%,#23044C 100%); }
.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__card-content { flex:1; }

/* Load more → red pill */
.page-id-893 .cs-page .xg-blog-grid__load-more-wrap { margin-top:64px; }
.page-id-893 .cs-page .xg-blog-grid__load-more { background:var(--coral); color:#fff; border-radius:9999px; padding:12px 26px; font-size:14px; font-weight:600; line-height:1.6; }
.page-id-893 .cs-page .xg-blog-grid__load-more:hover { background:#c80032; color:#fff; }
.page-id-893 .cs-page .xg-blog-grid__load-more svg { width:12px; height:12px; }

/* ── Newsletter (real .newsletter component) ── */
.page-id-893 .cs-page .newsletter__form--with-name { flex-wrap:wrap; }
.page-id-893 .cs-page .newsletter__name-row { display:flex; gap:8px; width:100%; margin-bottom:8px; order:-1; }
.page-id-893 .cs-page .newsletter__form--with-name .newsletter__error { order:3; }
.page-id-893 .cs-page .newsletter__success[hidden] { display:none; }

/* ── Case-study strip (real xgrowth/testimonial-card blocks) ── */
.page-id-893 .cs-page .rw-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:900px) { .page-id-893 .cs-page .rw-case-grid { grid-template-columns:1fr; } }
.page-id-893 .cs-page .rw-case-grid .wp-block-xgrowth-testimonial-card { background:var(--paper); }
/* Stat headline lives in the quote field as <strong> → rendered as its own line */
.page-id-893 .cs-page .rw-case-grid .wp-block-xgrowth-feedback-vertical__quote strong { display:block; font-family:'Playfair Display',Georgia,serif; font-size:21px; font-weight:600; line-height:1.3; color:var(--ink); margin:0 0 16px; }
.page-id-893 .cs-page .rw-case-grid .wp-block-xgrowth-feedback-vertical__quote strong mark { background:none; color:var(--coral); font-weight:inherit; }

/* ── ABM Tools ── */
.page-id-893 .cs-page .rw-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch; }
@media (max-width:900px) { .page-id-893 .cs-page .rw-tool-grid { grid-template-columns:1fr; } }
.page-id-893 .cs-page .rw-tool-card { display:flex; flex-direction:column; gap:16px; background:var(--deep); border-radius:var(--r); padding:32px; text-decoration:none; overflow:hidden; align-self:stretch; }
.page-id-893 .cs-page .rw-tool-card__preview { margin:-32px -32px 4px; height:220px; flex-shrink:0; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.page-id-893 .cs-page .rw-tool-card__preview img { width:100%; height:100%; object-fit:contain; display:block; }
.page-id-893 .cs-page .rw-tool-card__title { font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:600; line-height:1.3; color:#fff; margin:0; }
.page-id-893 .cs-page .rw-tool-card__desc { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.55; margin:0; min-height:3.1em; }
.page-id-893 .cs-page .rw-tool-card__cta { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--coral); color:#fff; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:600; text-decoration:none; }
.page-id-893 .cs-page .rw-tool-card:hover .rw-tool-card__cta { background:#c80032; }
.page-id-893 .cs-page .rw-tool-card__cta svg { width:12px; height:12px; }

/* ── Podcast teaser ── */
.page-id-893 .cs-page .rw-podcast-box { background:rgba(253,98,94,.07); border-radius:20px; padding:48px 40px; }
.page-id-893 .cs-page .rw-podcast-box__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.page-id-893 .cs-page .rw-podcast-box__head h2 { font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.2; color:var(--ink); margin:0; }
.page-id-893 .cs-page .rw-podcast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:768px) { .page-id-893 .cs-page .rw-podcast-grid { grid-template-columns:1fr; } }
.page-id-893 .cs-page .rw-podcast-card { display:flex; flex-direction:column; background:var(--deep); border-radius:16px; overflow:hidden; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.page-id-893 .cs-page .rw-podcast-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(35,4,76,.28); }
.page-id-893 .cs-page .rw-podcast-card__cover { aspect-ratio:1/1; background-position:50%; background-repeat:no-repeat; background-size:cover; }
.page-id-893 .cs-page .rw-podcast-card__body { padding:20px; display:flex; flex-direction:column; gap:8px; }
.page-id-893 .cs-page .rw-podcast-card__title { color:#fff; font-family:'Inter',sans-serif; font-size:16px; font-weight:700; line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.page-id-893 .cs-page .rw-podcast-card__desc { color:rgba(255,255,255,.72); font-size:13px; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.page-id-893 .cs-page .rw-podcast-card__meta { color:rgba(255,255,255,.5); font-size:11.5px; margin-top:2px; }

/* ── Parity fixes vs design (live theme/global form CSS differences) ── */
.page-id-893 .cs-page .rw-page-title,
.page-id-893 .cs-page .rw-podcast-box__head h2 { line-height:1.6; }
.page-id-893 .cs-page .newsletter__form { padding:0 !important; }
.page-id-893 .cs-page .newsletter__input { min-width:auto !important; }
.page-id-893 .cs-page .xg-blog-grid__load-more .xg-blog-grid__arrow {
  width:12px; height:12px; transform:rotate(135deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 11.5L11.5 2.5M11.5 2.5H5M11.5 2.5V9.5' stroke='%23fff' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
/* Theme mobile rule pads every .alignfull group by 20px — not on this wrapper */
body.page-id-893 .cs-page.wp-block-group.alignfull { padding-left:0 !important; padding-right:0 !important; }
/* Site-wide mobile heading sizes use !important — restore design sizes here */
body.page-id-893 .cs-page .rw-page-title { font-size:clamp(30px,4vw,44px) !important; line-height:1.6 !important; }
body.page-id-893 .cs-page .rw-head h2 { font-size:clamp(26px,2.8vw,34px) !important; line-height:1.2 !important; }
body.page-id-893 .cs-page .rw-podcast-box__head h2 { font-size:clamp(22px,2.4vw,28px) !important; line-height:1.6 !important; }
body.page-id-893 .cs-page .rw-featured .xg-blog-grid__title,
body.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__title { font-size:22px !important; line-height:1.3 !important; }
@media (max-width:768px) {
  body.page-id-893 .cs-page .rw-featured .xg-blog-grid__title,
  body.page-id-893 .cs-page .wp-block-xgrowth-blog-grid .xg-blog-grid__title { font-size:20px !important; }
}
body.page-id-893 .cs-page .rw-list-post .xg-blog-grid__title,
body.page-id-893 .cs-page .rw-podcast-card__title { font-size:16px !important; line-height:1.3 !important; }
body.page-id-893 .cs-page .rw-tool-card__title { font-size:20px !important; line-height:1.3 !important; }
/* Beat ".entry-content .wp-block-group.alignfull h1/h2 {…!important}" mobile rule */
body.page-id-893 .entry-content .cs-page.wp-block-group.alignfull .rw-page-title { font-size:clamp(30px,4vw,44px) !important; line-height:1.6 !important; }
body.page-id-893 .entry-content .cs-page.wp-block-group.alignfull .rw-head h2 { font-size:clamp(26px,2.8vw,34px) !important; line-height:1.2 !important; }
body.page-id-893 .entry-content .cs-page.wp-block-group.alignfull .rw-podcast-box__head h2 { font-size:clamp(22px,2.4vw,28px) !important; line-height:1.6 !important; }
body.page-id-893 .entry-content .cs-page.wp-block-group.alignfull .newsletter h2 { font-size:26px !important; line-height:1.2 !important; }
body.page-id-893 .cs-page .rw-case-grid .wp-block-xgrowth-testimonial-card { background-color:var(--paper) !important; color:inherit; }
/* Dynamic case-study cards (shortcode) */
body.page-id-893 .cs-page .rw-case-card__stat { font-family:'Playfair Display',Georgia,serif !important; font-size:21px !important; font-weight:600 !important; line-height:1.3 !important; color:var(--ink); margin:0 0 16px; letter-spacing:normal; }
body.page-id-893 .cs-page .rw-case-card__stat mark { background:none; color:var(--coral); font-weight:inherit; padding:0; }
body.page-id-893 .cs-page .rw-case-grid--2 { grid-template-columns:repeat(2, calc((100% - 60px) / 3)); justify-content:center; }
body.page-id-893 .cs-page .rw-case-grid--1 { grid-template-columns:calc((100% - 60px) / 3); justify-content:center; }
@media (max-width:900px) { body.page-id-893 .cs-page .rw-case-grid--1, body.page-id-893 .cs-page .rw-case-grid--2 { grid-template-columns:1fr; } }

/* Latest Articles list thumbnails: 16:9 featured images fit the row (no side cropping) */
body.page-id-893 .cs-page .rw-list-post__image { width:200px; aspect-ratio:auto; align-self:stretch; background-size:cover; background-position:center; }
@media (max-width:480px) { body.page-id-893 .cs-page .rw-list-post__image { width:130px; } }

/* Homepage testimonial cards (cloned xgrowth/container) — align to the page grid */
body.page-id-893 .cs-page .rw-section--testimonials .container > .wp-block-xgrowth-container { padding:0 !important; margin:0 !important; max-width:none !important; }


header::after {
  content: "";
  position: relative;
  inset: 0;
  background: linear-gradient(180deg, #23044C 0%, rgba(34, 4, 74, 0) 100%);
  pointer-events: none;
}

.single-post-sidebar-form .wpcf7-form .warranty-div{
  color: #fff;
  font-size: 12px;
}
.single-post-sidebar-form .wpcf7-form .wpcf7-list-item-label{
  font-size: 14px;
  top: -15px!important;
}
.single-post-sidebar-form .wpcf7-form .wpcf7-list-item{
  margin-left: 0px;
}
.single-post-sidebar-form .wpcf7-form  .wpcf7-form [type="checkbox"]{
  width: 20px;
  height: 20px;
}
.single-post-sidebar-form .wpcf7-form input.wpcf7-form-control{
  min-height: 34px
}
.single-post-sidebar-form.wpcf7-form .labeltext{
  font-size: 15px;
  font-weight: 500;
}

.page-id-898 .wpcf7-form .wpcf7-textarea{
  min-height: 80px;
}
.subscribe-modal-form  .labeltext{
  color: #1B2130!important;
  font-size: 13px;
  margin-bottom: 5px;
}

.subscribe-modal-form input[type="text"]{
   border: 1.5px solid #e2e4ed!important;
}

.subscribe-modal-form input[type="email"]{
   border: 1.5px solid #e2e4ed!important;
}

.subscribe-modal-form .wpcf7-form > div, .subscribe-modal-form .main-contact-form > div{
  margin-bottom: 0px!important;
}

.subscribe-modal-form .warranty-div{
  display: none;
}

.subscribe-modal-form .wpcf7-form .wpcf7-form-control::placeholder {
    font-size: 14px;
    font-weight: 400;
    left: -6px;
}

 .subscribe-modal-subtitle {
  margin-bottom: 10px;
}

.single-post-body #warranty{
  font-size: 14px!important;
}
.xg-feature-list__subtitle, .xg-feature-list__item-desc, .xg-help-section__top-text{
  font-size: 19px;
}
.xg-video-carousel__arrow svg {
    width: 24px;
    height: auto;
    display: block;
}
.wpcf7 input[type="submit"]{
  padding-right: 50px!important;
}
.subscribe-modal-form  form.sent .wpcf7-response-output{
  background-color:#46b450;
  border-radius: 8px;
  background: #46b450;
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 30px!important;
}

.xg-post-scope .toc-sidebar__sticky {
    top: 120px!important;
}

.custom-banner-cta-container h2{
  font-size: 25px!important;
}

.custom-banner-cta-container p{
  color: #ffffffb8!important;
  font-size: 15px!important;
  line-height: 1.55!important;
  max-width: 480px;
}
.custom-banner-cta-container{
  border-radius: 16px;
}
.custom-banner-cta-container .wp-block-button__link{
  padding-top:8px;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.xg-post-scope :where(.article-body) figure img {
    max-width: 800px;
}
.xg-post-scope :where(.article-body) figcaption{
  max-width: 800px;
  text-align: left!important;
}

.single-post h2,h3{
  color: #270156;
    margin-top: 0px;
    margin-bottom: 12px;
    font-size: clamp(20px, 3.5vw, 32px);
    font-weight: 700;
}
.xg-8eovxp{
  min-width: 50%;
}
@media (min-width: 768px) {
  .xg-8eovxp{
    margin-bottom: 200px!important;
  }
}
.xg-hkg8mk{
      min-width: 40%;
}
.xg-hgt8gz{
  padding-bottom: 0px!important;
}

.xg-check__input:checked ~ .xg-check__box {
    background: #D90041!important;
    border-color: #D90041!important;
}

@media (max-width: 540px) {
    .page-id-898 .main-contact-form {
        padding-left:0px!important;
        padding-right:0px!important;
    }
    .xg-m0byr9{
      display: none!important;
    }
    .xg-hgt8gz.alignfull{
      padding-left: 0px!important;
      padding-right: 0px!important;
    }
}

.xg-modal-container .wpcf7 input{
    border:1px solid #270156;
}

.xg-modal-container  .wpcf7-form .wpcf7-submit{
    border:1px solid #D90040;
}

.xg-modal-container  .wpcf7-form  .labeltext p{
    color: #270156;
    
}

.xg-results-section__logo img{
  max-height: 80px;
}
.xg-faq-section__answer{
  display: block!important;
}


@media (min-width: 540px) {
  .xg-post-scope .newsletter__input{
    min-width: 250px;
  }
  .xg-post-scope .newsletter__form {
      padding-left: 15px;
  }
}
.xg-video-carousel{
  background-color: transparent!important;
}
.xg-video-carousel__arrow svg{
      width: 12px;
}
.csd-hero__breadcrumb{
  display: none!important;
}

@media (max-width: 540px) {
  .csd-page{
    padding-left: 0px!important;
    padding-right: 0px!important;
  }
  .single-case-study .header-inner{
      padding-left: 20px!important;
      padding-right: 20px!important;
  }
  .csd-page .csd-hero__client {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }
}

.xg-logo-marquees{
  background: transparent!important;
  padding: 64px 0 26px!important;
}
.xg-logo-marquees::before {
  background: transparent!important;
}
/* ===================================================================
   xGrowth — Blog Post Content Typography
   Scope: .article-body  (the .entry-content.article-body.wp-block-post-content div)
   Block theme (FSE) — content is plain post HTML.
   =================================================================== */

.article-body {
    --purple: #23044c;
    --navy: #262946;
    --coral: #d90041;
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a72;
    --text-muted: #8888a0;
    --border: rgba(0, 0, 0, 0.08);

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.78;
    color: var(--text-primary);
}

/* -------------------------------------------------------------------
   CRITICAL: the editor wraps text in <span style="font-weight:400">.
   Inline styles beat normal rules, so headings would render at 400.
   Force any span/element inside a heading to inherit the heading's
   weight. !important (author) overrides the inline normal style.
   ------------------------------------------------------------------- */
.article-body :is(h1, h2, h3, h4, h5, h6) span,
.article-body :is(h1, h2, h3, h4, h5, h6) a {
    font-weight: inherit !important;
    color: inherit;
}

/* -- Paragraphs ----------------------------------------------------- */
.article-body p {
    font-size: 16px;
    line-height: 1.78;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.article-body p:last-child {
    margin-bottom: 0;
}
/* Strip the empty <p></p> placeholders the editor injects */
.article-body p:empty {
    display: none;
}

/* -- Headings ------------------------------------------------------- */
.article-body h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--purple);
    margin: 48px 0 18px;
}

.article-body h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--purple);
    margin: 40px 0 14px;
    scroll-margin-top: 88px; /* TOC anchor jumps clear the sticky nav */
}

.article-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--navy);
    margin: 30px 0 10px;
    scroll-margin-top: 88px;
}

.article-body h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--navy);
    margin: 26px 0 8px;
}

.article-body h5 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 24px 0 8px;
}

.article-body h6 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 22px 0 8px;
}

/* Tighten when a heading directly follows another heading */
.article-body h1 + h2,
.article-body h2 + h3,
.article-body h3 + h4 {
    margin-top: 14px;
}

/* No giant gap before the first block */
.article-body > :first-child {
    margin-top: 0;
}

/* -- Links (in body text) ------------------------------------------ */
.article-body a {
    color: var(--coral);
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 0, 65, 0.35);
    transition:
        border-color 0.15s,
        color 0.15s;
}
.article-body a:hover {
    color: var(--purple);
    border-bottom-color: var(--purple);
}
/* Links sit inline in <p>/<li>, so keep the span at body weight */
.article-body p a span,
.article-body li a span {
    font-weight: 400 !important;
}

/* -- Lists ---------------------------------------------------------- */
.article-body ul,
.article-body ol {
    padding-left: 22px;
    margin-bottom: 20px;
}

.article-body ul li,
.article-body ol li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-left: 4px;
}

.article-body ul li::marker {
    color: var(--coral);
}
.article-body ol li::marker {
    color: var(--coral);
    font-weight: 600;
}

/* Bold lead-in labels inside list items (e.g. "Buying Triggers -") */
.article-body li b,
.article-body li strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* Body-weight spans inside list items */
.article-body li > span {
    font-weight: 400;
}

.article-body li > ul,
.article-body li > ol {
    margin: 8px 0 0;
}

/* -- Inline text ---------------------------------------------------- */
.article-body strong,
.article-body b {
    font-weight: 700;
    color: var(--text-primary);
}
.article-body em,
.article-body i {
    font-style: italic;
}
.article-body mark {
    background: rgba(217, 0, 65, 0.12);
    color: inherit;
    padding: 0 3px;
    border-radius: 3px;
}
.article-body small {
    font-size: 13px;
    color: var(--text-muted);
}

/* -- Blockquote ----------------------------------------------------- */
.article-body blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--coral);
    font-size: 18px;
    line-height: 1.6;
    font-style: italic;
    color: var(--text-secondary);
}
.article-body blockquote p {
    margin-bottom: 12px;
}
.article-body blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--text-muted);
}

/* -- Code ----------------------------------------------------------- */
.article-body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: rgba(35, 4, 76, 0.06);
    color: var(--purple);
    padding: 2px 6px;
    border-radius: 4px;
}
.article-body pre {
    background: var(--purple);
    color: #fff;
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.6;
}
.article-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* -- Media ---------------------------------------------------------- */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 28px 0;
}
.article-body figure {
    margin: 28px 0;
}
.article-body figure img {
    margin: 0;
}
.article-body figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.article-body .wp-block-image {
    margin: 28px 0;
}
.article-body .wp-block-image figcaption {
    margin-top: 10px;
}

/* -- Tables --------------------------------------------------------- */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 15px;
}
.article-body th,
.article-body td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.article-body th {
    font-weight: 700;
    color: var(--purple);
    border-bottom-color: rgba(35, 4, 76, 0.18);
}

/* -- Divider -------------------------------------------------------- */
.article-body hr,
.article-body .wp-block-separator {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 40px 0;
}

/* -- Responsive ----------------------------------------------------- */
@media (max-width: 480px) {
    .article-body h1 {
        font-size: 26px;
        margin-top: 36px;
    }
    .article-body h2 {
        font-size: 20px;
        margin-top: 32px;
    }
    .article-body h3 {
        font-size: 17px;
    }
    .article-body blockquote {
        font-size: 16px;
        padding-left: 18px;
    }
}
 .xg-post-scope :where(.article-body) a{
    padding-bottom: 0px!important;
}

.xg-post-scope .toc-sidebar__sticky {
    margin-bottom: 100px;
}

.xg-cta__heading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)!important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--xg-ink-1)!important;
    margin: 0 0 16px;
}

.xg-post-scope .article-banner__image img{
    object-fit: contain!important;
}

.post-template-default .wp-caption{
    max-width: 100%!important;
}
.article-body .wp-block-video.presto-block-video {
    border-radius: 18px !important;
}

/* Single posts: match homepage header (overrides theme's #e5e5e5 light header) */
body.single-post .header-main {
  background-color: #23044C !important;
  background-image: none !important;
}
@media (max-width: 1023px) {
  body.single-post .header-nav-menu { background-color: #23044C !important; }
}
body.single-post .header-nav-list .menu-item a { color: #fff !important; }
body.single-post .header-hamburger span { background-color: #fff !important; }

/* Swap dark PNG logo for the homepage's white SVG */
body.single-post .header-site-logo .custom-logo-link {
  display: inline-block;
  background: url(../images/co/xGrowthLogo.svg) no-repeat left center / contain;
}
body.single-post .header-site-logo img { opacity: 0; }


@media (max-width: 767px) {
  .article-banner__byline-meta br { display: none; }
  .xg-post-scope .article-banner{
    border-radius: 0px!important;
  }
}
/* ==========================================================================
   xGrowth.co — Mobile Responsive Fixes (verified live at 375px)
   --------------------------------------------------------------------------
   Every rule below has been tested by injecting it into the live page on
   xgrowth.co at a true 375x mobile viewport, observing the computed
   styles change, and confirming visually with a screenshot.

   Drop this file at the END of your existing stylesheet, or paste the
   contents into:
     - WordPress: Appearance → Customize → Additional CSS
     - Block theme: Site Editor → Styles → Custom CSS
     - Or wherever your theme lets you add custom CSS

   Author: mobile audit, May 2026
   ========================================================================== */


/* --------------------------------------------------------------------------
   1.  Header / nav — make the hamburger reachable on phones
   --------------------------------------------------------------------------
   Before: `.header-hamburger` was being pushed off-screen by the wide
           CONTACT US pill. Live measurement at 375px showed:
             contact pill: left:158, right:346, width:188
             hamburger:    left:378, right:412  ← OFF-SCREEN
   After:  contact pill hidden, hamburger pinned to right edge.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  header .header-contact-wrap,
  header .wp-block-buttons.header-contact-wrap {
   // display: none !important;
  }
  .header-contact-btn-block .wp-block-button__link{
    padding: 4px 5px !important;
    font-size: .6rem !important;
    min-height: 32px !important;
    margin-right: 20px;
  }

  header { position: relative !important; }

  header .header-hamburger {
    display: flex !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
  }

  /* Alternative: keep the CONTACT pill, shrink it instead. Comment the
     two rules above and uncomment these to switch:
  header .header-contact-wrap a {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  header .header-hamburger {
    margin-left: 8px !important;
  }
  */
}


/* --------------------------------------------------------------------------
   2.  CTA buttons — stop them overflowing the viewport
   --------------------------------------------------------------------------
   Before: `.xg-cta-button` had `min-width: 320px` which overflows a
           375px viewport once the parent column padding is subtracted.
           Live: width:320, left:62, right:382 → 7px past the edge.
   After:  width:251, right:313 — fits with margin to spare.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  .xg-cta-button,
  .wp-block-xgrowth-cta-button {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* The methodology section's mobile-only red CTA at the bottom */
  .xg-meth-m-cta-btn {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    width: auto;
    max-width: min(320px, calc(100vw - 32px)) !important;
    margin-inline: auto;
    white-space: nowrap !important;
  }
}


/* --------------------------------------------------------------------------
   3.  "More X →" link blocks — keep arrow inline with the text
   --------------------------------------------------------------------------
   Live DOM:
     <div class="wp-block-xgrowth-container aligncenter is-layout-flow">
       <p class="displayblock min150px"><a>More about us</a></p>
       <figure class="wp-block-image aligncenter"><img></figure>
     </div>
   Three things were hiding the arrow on a new line:
     - The container is `display:flex` already, but `flex-direction:column`
     - The <a> had `width:150px !important` from `.min150px a`
     - The <figure> had `clear:both` forcing it below the paragraph
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .wp-block-xgrowth-container.aligncenter:has(> p.min150px) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  .wp-block-xgrowth-container.aligncenter > p.min150px {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .wp-block-xgrowth-container.aligncenter > p.min150px > a {
    width: auto !important;
    display: inline-block !important;
  }

  .wp-block-xgrowth-container.aligncenter > p.min150px + figure.wp-block-image,
  .wp-block-xgrowth-container.aligncenter > p.min150px + figure.wp-block-image.aligncenter {
    clear: none !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .wp-block-xgrowth-container.aligncenter > p.min150px + figure.wp-block-image img {
    height: 14px !important;
    width: auto !important;
    max-width: 24px !important;
  }
}


/* --------------------------------------------------------------------------
   4.  Section vertical padding — kill excess whitespace between sections
   --------------------------------------------------------------------------
   Before, on a 375x viewport:
     .xg-xbnnuq          padding-top: 80.96px  padding-bottom: 80.96px
     .xg-pvciwd          padding-top: 60px     padding-bottom: 60px
     .xg-79ak8b          padding-bottom: 80.96px
   These translate from desktop viewport-relative values and leave huge
   empty gaps on phones. Live measurement after fix: xg-xbnnuq shrank
   from 544px → 438px (saved 106px of dead space).
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  .xg-xbnnuq {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .xg-pvciwd {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .xg-79ak8b {
    padding-bottom: 24px !important;
  }
}


/* --------------------------------------------------------------------------
   5.  Trust bar logo marquee — stop logos clipping at viewport edges
   --------------------------------------------------------------------------
   Before: logo images were 224px wide on a 303px-wide marquee container,
           so they crashed into each other and the cuts at the edges
           looked broken.
   After:  logos at 22px height (~107px wide), and the edges fade out
           smoothly via a CSS mask so any partial logo at the edge looks
           intentional rather than clipped.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  .wp-block-xgrowth-logo-marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    ) !important;
            mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    ) !important;
  }

  .wp-block-xgrowth-logo-marquee__track img {
    height: 22px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* --------------------------------------------------------------------------
   6.  Reveal-on-scroll defensive fix
   --------------------------------------------------------------------------
   The site uses an IntersectionObserver-based reveal animation that sets
   elements to opacity:0 + transform:translateY(12px) by default and adds
   a `.xg-meth-m-revealed` (or similar) class when scrolled into view.
   On mobile the observer doesn't fire reliably for some sections, leaving
   key content invisible: Discovery / Fit Meeting / ACE Roadmap steps,
   ACE Roadmap Lite / ACE Execution / ROI Analysis flywheel items, and
   the $1.2mil / 6 opportunities / $1.4mil result cards.
   This rule is a safety net: force the final visible state for these
   elements on phones regardless of whether the observer fires.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  .xg-meth-m-step,
  .xg-meth-m-flywheel,
  .xg-meth-m-flywheel-item,
  .xg-meth-m-connector,
  .xg-text-section,
  .wp-block-xgrowth-text-section,
  .wp-block-xgrowth-testimonial-card,
  .xg-testimonial-row__card,
  .xg-results-section__card {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   8.  Global safety — prevent any element from forcing horizontal scroll
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  img, video, iframe, pre {
    max-width: 100%;
    height: auto;
  }
}
/* ================================================
   xGrowth Mobile Fixes — stable selectors
   ================================================ */

/* 1. Prevent horizontal scroll */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* 2. Any container with fixed 990px width */
@media (max-width: 1024px) {
  [style*="width: 990px"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 3. Scale down all headings */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.25 !important;
  }
  h3 {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.3 !important;
  }
}

/* 4. Stack any flex row that has multiple children on mobile */
@media (max-width: 640px) {
  header .wp-block-group[style*="display: flex"],
  main .wp-block-group[style*="display: flex; flex-direction: row"],
  main [style*="display: flex; flex-direction: row; gap"] {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
}

/* 5. WP Columns — stack on mobile */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
}

/* 6. Buttons — full width + touch target */
@media (max-width: 640px) {
  .wp-block-button a,
  .wp-block-buttons .wp-block-button {
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .wp-block-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* 7. Images never overflow
   NOTE: height is deliberately NOT forced here. A blanket
   `height: auto !important` also overrode components that set a fixed
   image height (logo marquee rows), so those logos rendered at full
   natural size on phones. max-width still prevents overflow, and the
   attribute rule below keeps the aspect ratio for plain content images. */
@media (max-width: 768px) {
  img {
    max-width: 100% !important;
  }
  img[width][height] {
    height: auto;
  }
}

/* 8. All full-width blocks — safe side padding */
@media (max-width: 768px) {
  .alignfull,
  .wp-block-cover,
  .wp-block-group.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .wp-block-cover__inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 9. Navigation — hide desktop links on mobile */
@media (max-width: 768px) {
  .header-nav-menu {
    display: none !important;
  }
  .header-hamburger {
    display: flex !important;
  }
  .header-contact-us {
    display: none !important;
  }
}

/* 10. Testimonials */
@media (max-width: 768px) {
  .wp-block-xgrowth-testimonial {
    padding: 28px 20px !important;
  }
}
.presto-player__wrapper .plyr__control--overlaid{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 100% !important;
}

.skin-modern.presto-player__wrapper button.plyr__control.plyr__control--overlaid{
      padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 100% !important;  
}
.plyr__controls{
    display: none;
}
@media (min-width: 820px) {
    .container-arrow-right{
        position: relative;
    }
    .container-arrow-right:after {
        content: url(../images/co/right-content-arrow.svg);
        position: absolute;
        right: -50px;
        top: 0px;
    }
}
@media (min-width: 768px) {
    .resources-page{
        position: relative;
    }
    .resources-page:before{
        content: url(../images/co/top-left-block-effect.svg);
        position: absolute;
        left:-40px;
    }
}
@media (min-width: 768px) {
    .header-nav-menu.is-open .header-nav-list .menu-item a{
        color:#fff!important
    }
}

body.page-id-3161{
    background-color: #ECF0F5;
}
body.page-id-1978{
    background-color:#E4EAF1;
}

.displayblock a{
   display: block!important;
}
.min150px a{
   width: 150px!important;
}

.xaligncenter img{
    margin-left: auto;
    margin-right: auto;
}

.header-contact-btn-block .wp-block-button__link::after {
    margin-left: 10px;
}
.customize-case-card .wp-block-xgrowth-feedback-vertical__logo img {
    max-height: 52px;
}
.header-site-logo img {
    max-height: 26px;
}
.wp-block-xgrowth-advantage-card__highlight{
    font-weight:700!important;
}

@media (min-width: 820px) {
    .container-arrow-right:after {
        content: url(../images/co/right-content-arrow.svg);
        position: absolute;
        right: -70px;
        top: 40px;
    }
}

.wp-block-xgrowth-feedback-vertical, .wp-block-xgrowth-advantage-card{
    -webkit-box-shadow: 0px 0px 10px 5px rgb(227 160 158 / 10%);
    box-shadow: 0px 0px 10px 5px rgb(227 160 158 / 10%);
}

@media (min-width: 1025px) {
    .footer-social-icons {
        gap: 24px !important;
    }
}

.xg-blog-grid__load-more:hover {
    color: #ff1a5c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.cs-decor-fade {
  position: relative;
}

.cs-decor-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245, 247, 250, 1) 0%,
    rgba(245, 247, 250, 0.9) 25%,
    rgba(245, 247, 250, 0.8) 50%,
    rgba(245, 247, 250, 0.9) 75%,
    rgba(245, 247, 250, 1) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.cs-decor-fade > * {
  position: relative;
  z-index: 1;
}
.remove-bg .cs-overview-card__infographic{
    background:unset;
}

.xg-case-study__hero-image::after{
    background: linear-gradient(177deg, #00000059 10%, rgba(255, 255, 255, 0.3) 100%);
}

.xg-case-study__highlight {
    font-size: 19px;
    line-height: 1.5;
}
.xg-case-study__description{
    font-size: 15.5px;
}
.postid-11788 .cs-hero{
    background-image: linear-gradient(180deg, rgba(35, 4, 76, 0.2) 0%, rgba(35, 4, 76, 0.45) 100%), url(../images/co/outsystems-hero.jpg)!important;
}
.xg-faq-section__line{
    display: block;
    flex: 1;
    height: 1.5px;
    background: #FD5754;
}
.xg-faq-section__crosshair svg{
    width: 20px;
    height: 20px;
}
.xg-text-section__bold strong{
    font-weight: 600;
}
.cs-campaign__card .cs-campaign__number{
    background-color: #f1e4e5;
}
.cs-campaign__card--outcome .cs-campaign__bullet-dot {
    background-color: #eb766e;
}
.cs-campaign__card:last-child .cs-campaign__bullet:first-child .cs-campaign__bullet-dot{
    display: none;
}
.cs-campaign__number{
    font-weight: 700;
}
.xg-cta-button__arrow svg{
    width: 20px;
    height: 20px;
}
.xg-meth-cta-button{
    height: 42px!important;
    min-height: 42px;
    padding: 0px 24px 0px 24px;
    width: auto;
    min-width: auto;
}

.xg-cta-button, .wpcf7-form .wpcf7-submit{
    height: 42px!important;
    min-height: 42px;
    padding: 0px 24px 0px 24px;
    width: auto!important;  
    min-width: auto;
}
.wpcf7 input[type="submit"]{
    padding-right: 40px;
    min-width: 200px!important;
}
.xg-meth-roadmaplite-title {
    width: 321px;
}
.xg-meth-roadmaplite-desc{
    top: 1749px;
}
body .header-main{
    padding-bottom: 20px!important;
    padding-top:20px!important;
}
.xg-testimonial-row__logo img{
    min-height: 64px;
    height: 64px;
}

.page-id-898 .wp-block-xgrowth-feedback-vertical, .page-id-898 .wp-block-xgrowth-advantage-card{
    -webkit-box-shadow: 0px 0px 10px 5px rgb(227 160 158 / 30%);
    box-shadow: 0px 0px 10px 5px rgb(227 160 158 / 30%);
}
.cs-campaign__card-content{
    padding-right: 25px;
}
.postid-11792 .cs-overview-card__infographic{
    background: #eeeeee
}
.postid-11799 .cs-hero{
    display: none;
}

.home .xg-testimonial-row__logo img {
    min-height: 44px;
    height: 44px;
}

/* ── Blog post mobile responsive (posts 18524-18527) ── */
@media (max-width: 1024px) {
  /* Hide sidebar on tablet/mobile for clean reading */
  .single-post-sidebar { display: none !important; }
  /* Make content column full width */
  .single-post-columns > .wp-block-column:not(.single-post-sidebar) {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* alignfull groups - break out of entry-content padding */
  .entry-content .wp-block-group.alignfull {
    margin-left: -20px !important; margin-right: -20px !important;
    width: calc(100% + 40px) !important; max-width: none !important;
  }

  /* Table overflow */
  .entry-content .wp-block-table,
  .entry-content figure.wp-block-table {
    overflow-x: auto !important; display: block !important;
  }
  /* Readable list items */
  .entry-content ul, .entry-content ol { padding-left: 20px !important; }
  /* Hero text sizing */
  .entry-content .wp-block-group.alignfull h1,
  .entry-content .wp-block-group.alignfull h2 {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  /* Columns inside posts stack */
  .entry-content .wp-block-columns {
    flex-direction: column !important;
  }
  .entry-content .wp-block-column {
    width: 100% !important; max-width: 100% !important; flex-basis: 100% !important;
  }
}

@media (max-width: 480px) {
  .entry-content .wp-block-group.alignfull {
    margin-left: -16px !important; margin-right: -16px !important;
    width: calc(100% + 32px) !important;
  }
  /* Tighter padding on small screens */
  .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
    padding-left: 16px !important; padding-right: 16px !important;
  }
}
.xg-subscribe__btn{
    background:  #D90040!important;
}
.xg-meth-cta-button{
  background: #D90041!important;
}

@media (max-width: 480px) {
    .wp-singular .xg-results-section {
        padding: 0px 20px !important;
    }
    .single-case-study .wp-block-group.alignfull,  .single-case-study .wp-block-group.alignfull .alignfull{
        padding-left:0px!important;
        padding-right: 0px!important;
    }
}

.xg-post-scope h2{
    border-bottom: 0px!important;
}

.single-post .xg-faq-section__left{
    display: none;
}
/*
.single-post.xg-post-scope header.article-banner{
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto!important;

}
*/

.xg-post-scope .article-banner {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #23044C 0%, #2c1960 40%, #262946 100%);
    border-radius: 20px;
    overflow: hidden;
    margin: 0 0 52px;
    width: 100%!important;
    max-width: 1180px!important;
    margin-left: auto;
    margin-right: auto!important;
}
.xg-post-article{
    padding-top: 42px;
}
.xg-post-scope .toc-sidebar{
    margin-right: 0px;
}

.xg-footer__top{
    border-top: 1px solid var(--xg-rule);
    padding-top: 56px;
    margin-top: 56px;
}

.xg-cta {
    padding: 24px 0 0px!important;
    border-bottom: 0px!important; 
    margin-bottom: 0px!important;
}
.xg-acknowledgement__label{
    font-family: 'Inter', sans-serif;
    font-size: 10px!important;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xg-coral)!important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px!important;
}
.xg-acknowledgement__inner p{
    font-size: 13px;
    line-height: 1.7;
    color: var(--xg-ink-2);
    margin: 0;
}
.xg-contact__email{
    text-transform: lowercase!important;
    line-height: 11px!important;
    font-size: 12px!important;
    font-weight: 400!important;
    margin-left: 5px;
    border-bottom: 0px!important;
}
.xg-contact__region{
    display: flex;
}

/* Changes 03.07.2026 */
body.page-id-11779 header.wp-block-template-part{
    position: sticky!important;
    top: 0px!important;
}

.cs-page .cs__client-logo {
    height: 68px;
    min-width: 151px;
}

/*
.page-template .xg-faq-section__left{
    display: block;
    position: relative;
    top: 0px;
}
.page-template .xg-faq-section{
    display: block;
    padding-left: 0px;
    padding-right: 0px;
}
*/

/* ============================================================
   FAQ section — "card" redesign, matches
   The_Foundations_of_a_High-Performing_B2B_Marketing_Strategy FAQ block.
   Targets the existing .xg-faq-section markup (xg-faq-section block) —
   no HTML changes required. Add via Customizer → Additional CSS,
   or append to assets/css/style.css.
   ============================================================ */

.page-template .xg-faq-section {
  display: block;
  flex-direction: unset;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 20px;
}

/* Drop the old sticky sidebar layout — heading now sits above the card */
.page-template .xg-faq-section__left {
  position: static;
  width: auto;
  align-self: auto;
  padding-top: 0;
  margin-bottom: 16px;
}

/* Reference design has no red line/crosshair decorator */
.page-template .xg-faq-section__decorator {
  display: none;
}

.page-template .xg-faq-section__heading {
  color: #23044c !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}

/* The card */
.page-template .xg-faq-section__items {
  background: #F8F5F0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 28px 24px 4px;
}

.page-template .xg-faq-section__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.page-template .xg-faq-section__item:last-child {
  border-bottom: none;
}

.page-template .xg-faq-section__question {
  padding: 20px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #23044c;
}

.page-template .xg-faq-section__toggle svg path {
  fill: #5a5a72;
}

.page-template .xg-faq-section__answer {
  padding: 0 0 20px;
}
.page-template .xg-faq-section__answer p {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #5a5a72 !important;
  margin: 0 0 12px !important;
}
.page-template .xg-faq-section__answer p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 480px) {
  .page-template .xg-faq-section { padding: 40px 16px; }
  .page-template .xg-faq-section__items { padding: 22px 18px 4px; }
  .page-template .xg-faq-section__question { padding: 16px 0; font-size: 15px; }
  .page-template .xg-faq-section__answer p { font-size: 14px !important; }
}




@media (max-width: 480px) {
    .xg-v0b2sg{
    margin-bottom:auto;
    margin-top: 0px!important;
    padding-top: 0px!important;
    }
    .wpcf7 input[type="submit"]{
        padding-right: 20px!important;
        padding-left: 20px!important;
        font-size: 12px!important;
    }
    .xg-footer__top{
        margin-top: 0px!important;
    }
    .main-contact-form{
        padding: 0px!important;
    }
}

@media (max-width: 540px) {
    .xg-m0byr9 {
       display: block !important; 
    }

}

.csd-page .hero__marquee-wrap{
    margin-bottom: 60px;
    margin-top: 0px;
    border-top: 0px;
}
.show-only-mobile{
    display: none;
}
.hide-only-mobile{
    display: block;
}

@media (max-width: 540px) {
 .show-only-mobile{
        display: block!important;;
    }  
    .hide-only-mobile{
        display: none!important;
    } 
    .page-id-898 .xg-cusbmz{
      flex-direction: column-reverse!important;
    }
}

.xg-meth-m-heading{
    color: #fff!important;
}
.opacity8{
    opacity: 0.8;
}
@media (max-width: 540px) {
    .xg-meth-m-flywheel-num{
        display: none;
    }
}

.xg-meth-retrospective-desc{
    text-align: right;
    top: 2280px;
}
.page-id-1096 .xg-text-section__body{
    font-family: Inter, sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.7;
}
@media (min-width: 2100px) {
    .xg-video-carousel__nav{
        display: none;
    }
}

@media (min-width: 820px) {
    .container-arrow-right:after {
        top: 0px!important;
    }
}


/* .co global styles custom CSS */
/* FAQ heading + intro paragraph on the Article (page) template.
   Auto-added by build/blocks/faq-section/render.php as children of the
   .xg-faq-section__items card (same bordered container as the Q&A items,
   matching the reference design). The __left sidebar column no longer
   renders on this template, so no visibility override is needed for it
   here — blog posts keep using __left as before, untouched. */
.xg-faq-section__items .xg-faq-section__intro {
	margin: 0 0 20px;
	color: #5a5a72;
	font-family: Inter, sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
}
.xg-faq-section__items .xg-faq-section__heading {
	margin: 0 0 8px !important;
}
/*# sourceURL=global-styles-inline-css */


/* .co homepage per-page ACF colours (header_bg_color, header_menu_color, footer_bg_color) */
.home .header-main { background-color: #23044C !important; background-image: none !important; }
@media (max-width: 1023px) { .home .header-nav-menu { background-color: #23044C !important; } }
.home .header-nav-list .menu-item a { color: #fff !important; }
.home .header-hamburger span { background-color: #fff !important; }
.home footer.wp-block-template-part { background-color: rgb(228,234,241) !important; }