/* =====================================================================
   InPhluence global CSS  (beinphluential.com)
   File: /hubfs/inphluence-site/inphluence-global.css
   Linked once from the beinphluential.com Site header HTML.
   Sections: 1 cookie banner buttons, 2 metrics alignment,
   3 blog .inph-post layout, 4 Elevate card icon colors,
   5 cookie banner bottom bar, 6 /contact landing page (2026-10-03).
   Why: Elevate is used directly (no child theme), so this is the single
   home for site-wide custom CSS. Consolidated by Website Developer 2026-10-03.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Cookie consent banner buttons (added 2026-10-03, William-approved)
   Accept = solid black primary, Decline = outlined secondary,
   Cookies settings = underlined Deep Emerald link. WCAG AA contrast.
   Styling only; consent behavior unchanged.
   Exact copy of the former Site header style#inph-cookie-banner-buttons.
   --------------------------------------------------------------------- */
#hs-eu-cookie-confirmation #hs-eu-confirmation-button,
#hs-eu-cookie-confirmation #hs-eu-decline-button {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#hs-eu-cookie-confirmation #hs-eu-confirmation-button {
  background: #000000 !important;
  color: #F1EFE7 !important;
  border: 2px solid #000000 !important;
}
#hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover {
  background: #014D4E !important;
  border-color: #014D4E !important;
  color: #FFFFFF !important;
}
#hs-eu-cookie-confirmation #hs-eu-decline-button {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
#hs-eu-cookie-confirmation #hs-eu-decline-button:hover {
  background: #F1EFE7 !important;
}
#hs-eu-cookie-confirmation #hs-eu-cookie-settings-button {
  color: #014D4E !important;
  font-family: Inter, Arial, sans-serif !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}
#hs-eu-cookie-confirmation #hs-eu-confirmation-button:focus-visible,
#hs-eu-cookie-confirmation #hs-eu-decline-button:focus-visible,
#hs-eu-cookie-confirmation #hs-eu-cookie-settings-button:focus-visible {
  outline: 3px solid #B97C52 !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   2. Elevate metrics module alignment (homepage "7 / 3 / 0" fix, ~Sep 2026;
   made global 2026-10-03). Centered, equal-height metric columns with
   tabular figures. Scoped to the Elevate metrics module classes, which
   only render on /, /case-studies and /marketing-agency-greater-houston.
   Formerly home-page head_html style#inphluence-home-metrics.
   --------------------------------------------------------------------- */
#main-content .hs-elevate-metrics-container { align-items: stretch; }
#main-content .hs-elevate-metrics-container__metric {
  display: flex !important; flex-direction: column; align-items: center; text-align: center; height: 100%;
}
#main-content .hs-elevate-metrics-container__metric-number {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  min-width: 1.2em; text-align: center; line-height: 1 !important;
}
#main-content .hs-elevate-metrics-container__metric-description {
  flex: 1 1 auto; max-width: 18rem; margin-left: auto; margin-right: auto;
}

/* ---------------------------------------------------------------------
   3. Blog article layout .inph-post (from the 2026-06-30 posts; made
   global 2026-10-03). Cream reading column, Playfair headings, lede,
   tables, note box, black CTA box, signature. Fonts are the theme's
   self-hosted Inter + Playfair Display (no Google Fonts @import).
   Canonical copy = /blog/psychology-of-authority-... post body style
   (superset of /blog/behavioral-marketing-strategies-2026-... ).
   --------------------------------------------------------------------- */
.inph-post {
  --cream: #f1efe7;
  --ink: #000000;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.inph-post h2, .inph-post h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 0.03em;
  line-height: 1.25;
  margin-top: 2.25em;
}
.inph-post h2 { font-size: 1.6rem; }
.inph-post h3 { font-size: 1.25rem; margin-top: 1.75em; }
.inph-post p { margin: 1.1em 0; }
.inph-post .inph-lede {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  border-left: 3px solid var(--ink);
  padding-left: 1.25em;
  margin: 0 0 2em;
}
.inph-post hr {
  border: none;
  border-top: 1px solid var(--ink);
  margin: 2.5em 0;
}
.inph-post a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inph-post ul, .inph-post ol { line-height: 1.85; padding-left: 1.4em; }
.inph-post li { margin: 0.4em 0; }
.inph-post table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.95rem;
}
.inph-post th, .inph-post td {
  border: 1px solid var(--ink);
  padding: 0.65em 0.8em;
  text-align: left;
  vertical-align: top;
}
.inph-post th {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  background: var(--ink);
  color: var(--cream);
}
.inph-post .inph-note {
  font-size: 0.92rem;
  border: 1px solid var(--ink);
  padding: 1em 1.25em;
  margin: 1.75em 0;
  background: transparent;
}
.inph-post .inph-cta {
  background: var(--ink);
  color: var(--cream);
  padding: 2em 2em 2.25em;
  margin: 3em 0 1em;
}
.inph-post .inph-cta h2 { color: var(--cream); margin-top: 0; }
.inph-post .inph-cta a { color: var(--cream); }
.inph-post .inph-sig {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  margin-top: 2.5em;
}

/* ---------------------------------------------------------------------
   4. Elevate card icon colors (added 2026-09-10; consolidated 2026-10-03).
   Black icons on sand #E4E2DC, 12px rounded icon boxes. The theme settings
   already set the same variables, but the fill/background/overflow rules
   below still change layout on /service-shop (preview test 2026-10-03),
   so ONE copy is kept here. Replaces the Site header copy, the linked
   /hubfs/inphluence-site/site-icon-colors.css and its pasted inline copy
   on 20 pages, and the home page copy. Only icon-card pages are affected.
   --------------------------------------------------------------------- */
:root,
.theme-overrides,
body {
  --hsElevate--card--variant1__iconColor: #000000 !important;
  --hsElevate--card--variant2__iconColor: #000000 !important;
  --hsElevate--card--variant3__iconColor: #000000 !important;
  --hsElevate--card--variant4__iconColor: #000000 !important;
  --hsElevate--card--variant1__iconBackgroundColor: #E4E2DC !important;
  --hsElevate--card--variant2__iconBackgroundColor: #E4E2DC !important;
  --hsElevate--card--variant3__iconBackgroundColor: #E4E2DC !important;
  --hsElevate--card--variant4__iconBackgroundColor: #E4E2DC !important;
  --hsElevate--card--variant1__iconBorderRadius: 12px !important;
  --hsElevate--card--variant2__iconBorderRadius: 12px !important;
  --hsElevate--card--variant3__iconBorderRadius: 12px !important;
  --hsElevate--card--variant4__iconBorderRadius: 12px !important;
  --hsElevate--cardIcon__borderRadius: 12px !important;
}
#main-content .hs-elevate-card-container__icon,
#main-content .hs-elevate-card-container__icon path,
.hs-elevate-card-container__icon,
.hs-elevate-card-container__icon path {
  fill: #000000 !important;
  color: #000000 !important;
}
#main-content .hs-elevate-card-container__icon-wrapper,
.hs-elevate-card-container__icon-wrapper {
  background-color: #E4E2DC !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   5. Cookie consent banner = bottom bar, max ~25% of the viewport
   (F1, /contact conversion audit, William-approved 2026-10-03).
   LAYOUT ONLY. Consent behaviour is untouched: same banners, same
   Accept / Decline / Cookies settings buttons, same categories, nothing
   preselected, Decline equally prominent. Works with HubSpot
   Settings > Privacy & Consent > Cookies > Customize > Banner Position =
   Bottom; these rules are the safety net so the bar stays a bar on phones.
   Uses HubSpot's own banner CSS variables; does NOT override transform /
   animation (HubSpot slides the banner in and unmounts it on choice).
   Site-wide: the banner is a domain-level element.
   --------------------------------------------------------------------- */
#hs-banner-parent {
  --hs-banner-inset: auto 0 0 0 !important;   /* pin to the bottom edge */
  --hs-banner-width: 100% !important;
  --hs-banner-corners: 0 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation {
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 25vh !important;
  max-height: 25dvh !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14) !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 12px 24px !important;
  display: flex !important;
  flex-direction: column !important;   /* HubSpot switches this per breakpoint; pin it */
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-header-container { display: none !important; } /* empty: close button is off in settings */
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording,
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording p {
  margin: 0 !important;
  line-height: inherit !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area {
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  margin: 0 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px 16px !important;
  margin: 0 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
#hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-decline-button {
  margin: 0 !important;
  padding: 10px 22px !important;
}
@media (max-width: 767px) {
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
    padding: 10px 14px 12px !important;
    row-gap: 6px !important;
  }
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-policy-wording,
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area,
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group {
    width: 100% !important;
    align-self: stretch !important;
  }
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
  #hs-banner-parent #hs-eu-cookie-confirmation #hs-eu-decline-button {
    flex: 1 1 0 !important;          /* Accept and Decline stay the same size */
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------
   6. /contact ad landing page (landing page 344046328564) - F2/F3/F4
   (William-approved 2026-10-03). Scoped by HubSpot's body class
   .hs-content-id-344046328564 so no other page changes.
   Mobile: smaller logo band and H1 so H1 -> sub -> form fit the first
   ~1.5 screens. Jump button shows on phones only (form sits beside the
   copy on desktop).
   --------------------------------------------------------------------- */
.hs-content-id-344046328564 #hs_form_target_dnd_area-module-6 { scroll-margin-top: 16px; }
.hs-content-id-344046328564 .inph-cta-jump {
  display: inline-block;
  background: #000000;
  color: #F1EFE7 !important;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none !important;
}
.hs-content-id-344046328564 .inph-cta-jump:hover,
.hs-content-id-344046328564 .inph-cta-jump:focus-visible { background: #014D4E; color: #FFFFFF !important; }
.hs-content-id-344046328564 .inph-cta-jump:focus-visible { outline: 3px solid #B97C52; outline-offset: 2px; }
.hs-content-id-344046328564 .inph-area { font-size: 15px; margin-top: 12px; }
@media (min-width: 768px) {
  .hs-content-id-344046328564 .inph-jump { display: none; }
}
@media (max-width: 767px) {
  .hs-content-id-344046328564 #hs_cos_wrapper_dnd_area-module-3 p:last-child { margin-bottom: 0; }
  .hs-content-id-344046328564 .dnd_area-column-1-padding { padding-bottom: 0 !important; }
}
/* F9 /contact: logo links don't leave the page (fallback; images kept) */
.hs-content-id-344046328564 #hs-link-header-module-1_hs_logo_widget,
.hs-content-id-344046328564 #hs-link-footer-module-3_hs_logo_widget { pointer-events: none; cursor: default; }

/* ---------------------------------------------------------------------
   7. Belief Audit /belief-audit (landing page 405960253148), 2026-10-05.
   Draft page, Cosmo review before publish. Scoped by HubSpot's body
   class .hs-content-id-405960253148 so no other page changes.
   7a anchor offset, 7b phone-only jump button (same pill as /contact
   .inph-cta-jump), 7c hero gap, 7d form-block spacing, 7e eyebrow and
   bronze section rules. No sticky column: the intake form is taller
   than a desktop viewport, so sticky would hide the submit button.
   --------------------------------------------------------------------- */
/* 7a. Jump targets land with a little air above them */
.hs-content-id-405960253148 #belief-audit-form,
.hs-content-id-405960253148 #hs_form_target_dnd_area-module-7 { scroll-margin-top: 16px; }

/* 7b. "Start your Belief Audit" jump button: phones only (the form sits
   beside the copy on desktop, below everything on phones) */
.hs-content-id-405960253148 .inph-jump { margin: 8px 0 20px; }
.hs-content-id-405960253148 .inph-cta-jump {
  display: inline-block;
  background: #000000;
  color: #F1EFE7 !important;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none !important;
}
.hs-content-id-405960253148 .inph-cta-jump:hover,
.hs-content-id-405960253148 .inph-cta-jump:focus-visible { background: #014D4E; color: #FFFFFF !important; }
.hs-content-id-405960253148 .inph-cta-jump:focus-visible { outline: 3px solid #B97C52; outline-offset: 2px; }
@media (min-width: 768px) {
  .hs-content-id-405960253148 .inph-jump { display: none; }
}

/* 7c. Hero gap. The header logo PNG is 1000x500 with ~31% empty linen
   above and below the mark (mark spans rows 156-340, background is
   Soft Linen #F1EFE7), so show only the middle band (rows ~140-360).
   Then trim the header bottom padding (24px) and the first section's
   top padding (theme 96px). Measured on /contact at 1440 wide: H1 top
   358px; expected here ~155px. */
.hs-content-id-405960253148 #hs_cos_wrapper_header-module-1 img {
  aspect-ratio: 1000 / 220;
  object-fit: cover;
  object-position: 50% 50%;
}
.hs-content-id-405960253148 .header-row-0-padding { padding-bottom: 8px !important; }
.hs-content-id-405960253148 #main-content .dnd-section.row-number-1 { padding-top: 32px; }
@media (max-width: 767px) {
  .hs-content-id-405960253148 #main-content .dnd-section.row-number-1 { padding-top: 16px; }
}

/* 7d. Less air between the right-column intro and the form card */
.hs-content-id-405960253148 #hs_cos_wrapper_dnd_area-module-6 p:last-child { margin-bottom: 0; }

/* 7e. Eyebrow + one warm accent rule between long-copy sections */
.hs-content-id-405960253148 .inph-eyebrow {
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hs-content-id-405960253148 #hs_cos_wrapper_dnd_area-module-3 h2 {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #B97C52;
}

/* A1 /narrative-control calendar fallback line (Developer-reviewed 2026-10-10) */
.inph-offer .io-meet .io-meet-fallback{font-size:.875rem;line-height:1.4;margin:.75rem 1rem 1rem;text-align:center;color:var(--io-ink)}
.inph-offer .io-meet .io-meet-fallback a{color:var(--io-ink);text-decoration:underline;text-underline-offset:3px}