/*
Theme Name: OmniGrowth
Theme URI: https://omnigrowthx.com
Author: OmniGrowth
Author URI: https://omnigrowthx.com
Description: Dark, disciplined, premium base theme for omnigrowthx.com. Design tokens mirror assets/css/tokens.css from the static build (Brand Guideline v1.0). Built to work with Elementor / Elementor Pro Theme Builder — header, footer, single and archive locations are handed to Elementor when a template is assigned there, otherwise the theme's own minimal markup renders.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
Requires Plugins: elementor
License: Proprietary
Text Domain: omnigrowthx
*/

/* ===========================================================================
   Design tokens — Part 3.2 / 3.3 of the Brand Guideline.
   Mirrors assets/css/tokens.css in the static build. That file is still the
   source of truth for the brand; if the two drift, fix this one to match it.
   Governance rule (Part 10.1): use these tokens, never an approximated hex.
   =========================================================================== */
:root {
  --og-obsidian:      #0A0A0A;
  --og-white:         #F5F5F5;
  --og-maroon:        #7B1C2E;
  --og-crimson:       #B02040;
  --og-gold:          #C9A84C;
  --og-graphite:      #141414;
  --og-steel:         #8A8A8A;

  --og-bg:            var(--og-obsidian);
  --og-surface:       var(--og-graphite);
  --og-surface-alt:   #0F0F0F;
  --og-footer-bg:     #080808;
  --og-border:        #1E1E1E;
  --og-hairline:      #161616;

  --og-gradient:      linear-gradient(135deg, #7B1C2E 0%, #B02040 100%);
  --og-gradient-v:    linear-gradient(180deg, #7B1C2E 0%, #B02040 100%);
  --og-glow:          0 0 24px rgba(176, 32, 64, 0.4);
  --og-glow-soft:     0 0 32px rgba(176, 32, 64, 0.18);
  --og-gold-rule:     rgba(201, 168, 76, 0.35);

  --og-font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --og-font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --og-font-accent:  'Cormorant Garamond', 'Times New Roman', serif;
  --og-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --og-size-h1:     clamp(2.5rem,   1.757rem + 3.048vw, 4.5rem);
  --og-size-h2:     clamp(2rem,     1.629rem + 1.524vw, 3rem);
  --og-size-h3:     clamp(1.5rem,   1.314rem + 0.762vw, 2rem);
  --og-size-h4:     clamp(1.25rem,  1.157rem + 0.381vw, 1.5rem);
  --og-size-lead:   1.125rem;
  --og-size-body:   1rem;
  --og-size-quote:  clamp(1.25rem,  1.111rem + 0.571vw, 1.625rem);
  --og-size-stat:   clamp(2.75rem,  2.286rem + 1.905vw, 4rem);
  --og-size-label:  0.75rem;

  --og-lh-display: 1.1;
  --og-lh-heading: 1.15;
  --og-lh-body:    1.65;

  --og-track-label: 0.22em;
  --og-track-brand: 0.16em;

  --og-section-y: clamp(4rem, 2.5rem + 6vw, 7rem);
  --og-gutter:    clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  --og-wrap:      1200px;
  --og-gap:       1.5rem;

  --og-radius:    6px;
  --og-radius-lg: 8px;

  --og-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== Reset ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--og-bg);
  color: var(--og-white);
  font-family: var(--og-font-body);
  font-size: var(--og-size-body);
  line-height: var(--og-lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ===== Typography — Part 3.3 ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--og-font-display);
  font-weight: 700;
  color: var(--og-white);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--og-size-h1); line-height: var(--og-lh-display); letter-spacing: -0.022em; }
h2 { font-size: var(--og-size-h2); line-height: var(--og-lh-heading); letter-spacing: -0.02em; }
h3 { font-size: var(--og-size-h3); line-height: var(--og-lh-heading); font-weight: 600; }
h4 { font-size: var(--og-size-h4); line-height: 1.3; font-weight: 600; }

p { margin: 0 0 1em; }
.og-lead { font-size: var(--og-size-lead); }
.og-muted { color: var(--og-steel); }

/* Pull-quote typography for plain, non-Elementor markup (404.php, an
   un-Elementor'd page's the_content()).

   :not(.elementor-element) is the same guard the buttons below carry, and for
   the same reason (gotcha #3): ".og-quote" is ALSO the testimonial card's own
   class on the homepage, applied as an Elementor "CSS Classes" value. Without
   the guard this rule painted the whole card — every child inherited
   Cormorant italic gold at 26px, so the badge and the byline rendered italic
   and the quote itself came out gold instead of warm white. Only the quote's
   own text is italic (data/ai/02-design-tokens.md: Cormorant is italic only,
   and it is the accent face, not a card face).

   A bare `blockquote` is deliberately left unguarded — it is a real element,
   never an Elementor wrapper — but it is out-specificity'd where a card owns
   it, by .og-quote__text / .og-band__quote further down. */
blockquote:not(.elementor-element),
.og-quote:not(.elementor-element) {
  font-family: var(--og-font-accent);
  font-style: italic;
  font-size: var(--og-size-quote);
  color: var(--og-gold);
  margin: 0;
}

.og-eyebrow {
  display: inline-block;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 500;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
  margin-bottom: 0.75em;
}

/* ===== Layout ============================================================ */
.og-wrap {
  max-width: var(--og-wrap);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--og-gutter);
}
.og-section { padding-block: var(--og-section-y); }
.og-section--alt { background: var(--og-surface-alt); }

/* ===== Buttons — Part 6.2 ================================================
   Values here are lifted 1:1 from assets/css/style.css (.btn / .btn--sm) —
   check that file before changing a number here.

   :not(.elementor-element) guards every rule here: these same class names
   are also used as an Elementor Button widget's "CSS Classes", which land
   on the *outer* widget wrapper div (marked .elementor-element) while the
   real visible button is the nested .elementor-button — see the bridge
   rules bottom of this file. Without the guard both would apply to the
   outer div at once, stacking two padded/bordered boxes inside each other.
   ========================================================================= */
.og-btn:not(.elementor-element) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 17px 30px;
  border-radius: var(--og-radius);
  font-family: var(--og-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.25s var(--og-ease), background 0.25s var(--og-ease),
    color 0.25s var(--og-ease), border-color 0.25s var(--og-ease);
}
.og-btn--primary:not(.elementor-element) { background: var(--og-gradient); color: var(--og-white); border-color: transparent; }
.og-btn--primary:not(.elementor-element):hover { box-shadow: var(--og-glow); }
.og-btn--secondary:not(.elementor-element) { background: transparent; color: var(--og-white); border-color: var(--og-white); }
.og-btn--secondary:not(.elementor-element):hover { color: var(--og-gold); border-color: var(--og-gold); }
.og-btn--gold:not(.elementor-element) { background: var(--og-gold); color: var(--og-obsidian); }
.og-btn--ghost:not(.elementor-element) { background: var(--og-surface); color: var(--og-white); border-color: var(--og-border); }
.og-btn--invert:not(.elementor-element) { background: var(--og-white); color: var(--og-maroon); }
.og-btn--sm:not(.elementor-element) { min-height: 44px; padding: 12px 22px; font-size: 0.875rem; }

/* ===== Cards ============================================================= */
.og-card {
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  padding: 2rem;
  transition: box-shadow 0.25s var(--og-ease), border-color 0.25s var(--og-ease);
}
.og-card:hover { box-shadow: var(--og-glow-soft); border-color: var(--og-gold-rule); }
.og-card__icon { color: var(--og-gold); }

/* ===== Focus & accessibility ============================================= */
:focus-visible { outline: 2px solid var(--og-gold); outline-offset: 3px; }
.og-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--og-obsidian);
  color: var(--og-white);
  padding: 1em 1.5em;
  z-index: 999;
  border-radius: 0 0 var(--og-radius) 0;
}
.og-skip-link:focus { left: 0; }

/* WordPress's standard visually-hidden text (plugin markup uses it, e.g.
   "(opens in a new tab)" after a link). Added 2026-10-07. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Site chrome — used only where no Elementor header/footer template
   is assigned in Theme Builder ============================================ */
.og-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--og-hairline);
}
.og-site-header .og-wrap:not(.elementor-element) { padding-block: 1rem; }
.og-site-header__brand {
  font-family: var(--og-font-display);
  font-weight: 700;
  letter-spacing: var(--og-track-brand);
  color: var(--og-white);
  text-transform: uppercase;
  font-size: 1rem;
}
.og-site-header__brand span { color: var(--og-gold); }
.og-site-header__nav ul { display: flex; gap: 2rem; }
.og-site-header__nav a { font-size: 0.9375rem; font-weight: 500; }
.og-site-header__nav a:hover { color: var(--og-gold); }

.og-site-footer {
  background: var(--og-footer-bg);
  border-top: 1px solid rgba(201, 168, 76, 0.4);
}
.og-site-footer p { margin: 0; }

/* ===== 404 ================================================================ */
.og-error-404 { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===========================================================================
   Elementor header/footer build — mirrors index.html / enterprise.html's
   header and footer 1:1 (data/ai/10-wordpress-theme.md). These "og-" classes
   are applied as "CSS Classes" (Advanced tab) on the Container/widget
   elements inside the Elementor Pro Theme Builder Header/Footer templates
   (wp-theme/build-header-footer.php).

   No !important anywhere below. Elementor generates its own per-element CSS
   for every container/widget, and this theme's stylesheet is enqueued
   *before* Elementor's, so a plain same-specificity rule loses the tie —
   every selector here is deliberately over-specific instead.

   IMPORTANT: Elementor puts its own ".elementor-element" class on the exact
   same DOM node as our "og-" class (not on some separate ancestor wrapper),
   so the boost has to be a COMPOUND selector — ".elementor-element.og-foo"
   — not ".elementor-element .og-foo" with a space. A descendant combinator
   there never matches anything and the rule silently does nothing (found by
   testing: the "column"/huge-button regression right after removing
   !important was exactly this — every rule below used the space form and
   none of them were ever matching). Verify a new rule the same way: in
   devtools, `document.querySelector('.og-foo').matches('.elementor-element.og-foo')`
   must return true.
   =========================================================================== */

/* Elementor's "boxed" container wraps real children in an extra .e-con-inner
   div (for its own width-centring, which we don't use — .og-wrap already
   does that). Unwrap it so the flex/grid rules below reach the actual
   children instead of just their single stretched wrapper. .e-con-inner
   itself carries no "og-" class — it's a genuine descendant of whichever
   .elementor-element container generated it. */
.elementor .elementor-element .e-con-inner { display: contents; }

/* The Heading widget's real text sits in a nested .elementor-heading-title —
   for h1-h6 tags the browser's/Elementor's own per-widget CSS gives that
   element its own font-size etc, which wins over inheriting our class's
   typography from the ancestor wrapper div (a directly-set value always
   beats an inherited one, regardless of specificity). Force it back to
   inherit from whichever "og-" ancestor is doing the actual styling. */
.elementor .elementor-element.og-site-header .elementor-heading-title,
.elementor .elementor-element.og-site-footer .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

/* .og-wrap / .og-site-header / .og-site-footer also exist as plain
   (unboosted) rules above for the PHP fallback templates — those rules lose
   several properties here (position, max-width, padding-inline, …) to
   Elementor's own per-element CSS since both load with the same low
   specificity and Elementor's stylesheet is enqueued after ours. Re-declare
   the properties that matter, boosted, rather than guarding every property
   with :not(.elementor-element) as the buttons above do. */
.elementor .elementor-element.og-wrap {
  max-width: var(--og-wrap);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--og-gutter);
}
/* Same story as .og-wrap above: the base (unboosted) .og-section rule near
   the top of this file is for the plain-HTML 404.php fallback only. Inside
   Elementor it was losing padding-block entirely to the Kit's own Container
   Padding default (set to 0 — see "Site-wide Elementor Kit settings" in
   data/ai/10-wordpress-theme.md), leaving every homepage/enterprise section
   flush top-and-bottom against its neighbours. */
.elementor .elementor-element.og-section { padding-block: var(--og-section-y); }
.elementor .elementor-element.og-section--alt { background: var(--og-surface-alt); }
/* The hairline that separates one section from the one above it —
   .section--ruled in the static build, on #proof (homepage) and on the
   differentiator band + operator model (Enterprise). It was the only one of
   the three .section modifiers with no rule here at all, so those dividers
   simply never drew. */
.elementor .elementor-element.og-section--ruled { border-top: 1px solid var(--og-hairline); }
/* Fixed header, as in the static build (.site-header: sticky, top 0).
   The sticky rule has to sit on Elementor's LOCATION wrapper, not on
   .og-site-header: the Header template renders inside
   <header class="elementor … elementor-location-header">, which is exactly as
   tall as the header itself — sticky on the inner element has no room to
   stick in, so the header used to scroll away with the page. The wrapper is a
   direct child of <body> (header.php), so it sticks for the whole page.
   The admin bar is fixed above 600px and scrolls away below it. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-bar .elementor-location-header { top: var(--wp-admin--admin-bar--height, 0px); }
/* In-page anchor jumps (#services, #contact, #case-…) stop below the header
   instead of under it. --og-header-bottom comes from header.js. */
html { scroll-padding-top: var(--og-header-bottom, 72px); }
@media (max-width: 600px) {
  .admin-bar .elementor-location-header { top: 0; }
}
/* The frosted glass is painted by a pseudo-element, not by backdrop-filter on
   the header box itself: backdrop-filter makes an element the containing
   block of its position:fixed descendants, and the mobile menu below is one —
   it would be pinned to the 72px header box instead of the viewport. */
.elementor .elementor-element.og-site-header {
  position: relative;
  z-index: 1;
  background: rgba(10, 10, 10, 0.8);
  border-bottom: 1px solid var(--og-hairline);
}
.elementor .elementor-element.og-site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.elementor .elementor-element.og-site-footer {
  background: var(--og-footer-bg);
  border-top: 1px solid rgba(201, 168, 76, 0.4);
}

.elementor .elementor-element.og-site-header .elementor-element.og-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2rem;
  min-height: 72px;
}

.elementor .elementor-element.og-brand {
  display: inline-flex;
  /* Gotcha #11: a Container's flex-direction defaults to COLUMN, via
     Elementor's own `flex-direction: var(--flex-direction)` — so the gold dot
     was stacking underneath the wordmark instead of sitting beside it. Both
     of Elementor's rules for this property are low specificity (one is inside
     :where(), which contributes nothing at all), so naming it here wins. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  gap: 7px;
  font-family: var(--og-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--og-track-brand);
  color: var(--og-white);
  white-space: nowrap;
}
/* The logo (2026-10-06): an Image widget inside the og-brand link container,
   replacing the typeset wordmark + gold dot. The artwork is a stacked lockup
   (assets/img/omnigrowth-logo-white.webp, 600×216), so it is sized by
   HEIGHT — 52px keeps the header bar at its 72px minimum. Same values as the
   static build's .brand__logo. `.elementor img { height: auto;
   max-width: 100% }` is Elementor's own rule; this one out-ranks it. */
.elementor .elementor-element.og-brand__logo { width: auto; line-height: 0; }
.elementor .elementor-element.og-brand__logo img {
  display: block;
  width: auto;
  height: 52px;
  max-width: none;
}
@media (max-width: 640px) {
  .elementor .elementor-element.og-site-header .elementor-element.og-brand__logo img { height: 44px; }
}

.elementor .elementor-element.og-nav { display: flex; flex-direction: row; flex: 0 1 auto; min-width: 0; }
/* The DESKTOP menu only — the mobile dropdown is a second <ul class=
   "elementor-nav-menu"> inside .elementor-nav-menu--dropdown and is laid out
   as a vertical list further down. Unscoped, this rule turned the dropdown
   into a horizontal row between 641 and 1024px. */
.elementor .elementor-element.og-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2.125rem;
}

.elementor .elementor-element.og-site-header__cta { flex: 0 0 auto; white-space: nowrap; }
.elementor .elementor-element.og-site-header__cta .elementor-button { white-space: nowrap; }

/* Header collapse. The static build uses 1023px (data/ai/06-invariants.md
   #17), but the Nav Menu widget swaps to its hamburger on ELEMENTOR's own
   "tablet" breakpoint, which is max-width 1024 — and that is not a value this
   stylesheet can move, only the Kit's breakpoint settings can. Holding 1023
   here left exactly one width, 1024px, showing the hamburger AND the desktop
   CTA side by side with no nav between them. Matching Elementor's 1024 keeps
   the whole header switching on one line instead. Still far above the ~1000px
   where Enterprise's longer labels stop fitting, which is what the 1023 value
   was protecting in the first place. */
@media (max-width: 1024px) {
  .elementor .elementor-element.og-site-header__cta { display: none; }
}

.elementor .elementor-element.og-nav .elementor-item {
  font-family: var(--og-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--og-white);
  /* Elementor's Nav Menu widget gives each item its own 13px 20px 5px
     default padding — zero out top/left/right so .og-nav's own 2.125rem
     gap is the only horizontal spacing, matching the static build exactly. */
  padding: 0 0 5px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.16s var(--og-ease), color 0.16s var(--og-ease);
}
.elementor .elementor-element.og-nav .elementor-item:hover,
.elementor .elementor-element.og-nav .elementor-item:focus,
.elementor .elementor-element.og-nav .elementor-item.elementor-item-active,
.elementor .elementor-element.og-nav .elementor-item.highlighted {
  border-bottom-color: var(--og-gold);
  color: var(--og-white);
  fill: var(--og-white);
}

/* The Nav Menu widget's mobile dropdown panel — Elementor's default is a
   white box, which reads as unstyled and is illegible against our dark
   .elementor-item text colour above. Scoped to the toggle breakpoint only —
   above it this same markup is the plain horizontal desktop menu and must
   stay transparent. */
/* The hamburger is a real control, so it carries the project's 44px minimum
   touch target (data/ai/06-invariants.md #27) and the static build's
   .nav-toggle chrome. Elementor's own default renders it at 33x33. */
.elementor .elementor-element.og-nav .elementor-menu-toggle {
  /* No `display` here on purpose: Elementor's own media query is what hides
     this button above the dropdown breakpoint, and declaring display:flex
     unconditionally left the hamburger showing next to the full desktop nav. */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius);
  background: none;
  color: var(--og-white);
}
.elementor .elementor-element.og-nav .elementor-menu-toggle svg,
.elementor .elementor-element.og-nav .elementor-menu-toggle i {
  width: 20px; height: 20px; font-size: 20px; fill: var(--og-white); color: var(--og-white);
}
/* Mobile menu (≤1024px, Elementor's own dropdown breakpoint), after
   mahsahospital.com: the burger turns into a close icon and the menu opens as
   a full-screen panel UNDER the header bar — position: fixed, so opening it
   never changes the header's height or pushes the page. Left in the flow (as
   before) the dropdown stretched the header to ~380px.

   --og-header-bottom is the header's bottom edge in the viewport (admin bar
   included), kept current by assets/js/header.js; 72px is the fallback.
   Elementor still owns open/close: closed = max-height 0 + scaleY(0), open =
   max-height var(--menu-height) + scaleY(1), animated from the top edge. */
@media (max-width: 1024px) {
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed;
    top: var(--og-header-bottom, 72px);
    left: 0;
    right: 0;
    width: auto;
    height: calc(100vh - var(--og-header-bottom, 72px));
    height: calc(100dvh - var(--og-header-bottom, 72px));
    margin: 0;
    padding: 1rem var(--og-gutter) 2.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--og-obsidian);
    border: 0;
    border-top: 1px solid var(--og-hairline);
    border-radius: 0;
    box-shadow: none;
    z-index: 100;
  }
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown .elementor-item {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--og-hairline);
    background: none;
    font-family: var(--og-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--og-white);
  }
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown .elementor-item:focus,
  .elementor .elementor-element.og-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background: none;
    color: var(--og-gold);
    border-bottom-color: var(--og-hairline);
  }
  /* The header CTA, cloned into the panel by header.js (the header's own copy
     is hidden at this width). */
  .elementor .elementor-element.og-nav .og-menu-cta { margin-top: 2rem; }
  .elementor .elementor-element.og-nav .og-menu-cta .elementor-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  /* The page behind the open panel does not scroll. On <html> ONLY: with
     overflow hidden on <body> as well, <body> becomes a scroll container of
     its own, the sticky header sticks to THAT (unscrolled) box instead of the
     viewport, and header and panel both jump off the top of the screen. */
  html.og-menu-open { overflow: hidden; }
}

.elementor .elementor-element.og-footer__inner { display: flex; flex-direction: column; }

.elementor .elementor-element.og-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-block: 4.5rem 2.5rem;
}
.elementor .elementor-element.og-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.elementor .elementor-element.og-footer__brand .elementor-element.og-brand { opacity: 0.85; }
.elementor .elementor-element.og-footer__brand .elementor-element.og-brand__logo img { height: 80px; }
.elementor .elementor-element.og-footer__blurb {
  color: var(--og-steel);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.elementor .elementor-element.og-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}
.elementor .elementor-element.og-footer__title {
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--og-white);
  margin: 0;
}
.elementor .elementor-element.og-footer__col p { margin: 0; }
.elementor .elementor-element.og-footer__col p + p { margin-top: 0.875rem; }
.elementor .elementor-element.og-footer__col a { color: var(--og-steel); font-size: 0.9375rem; }
/* [HELLO@OMNIGROWTHX.COM] is one unbreakable 219px token. Elementor puts
   min-width:0 on its containers, so unlike the static build the grid column
   does NOT grow to fit it — the text just spilled past the page edge, which
   showed up as ~4px of horizontal scroll between roughly 930 and 1000px.
   `anywhere` (not `break-word`) is the one that also lowers the element's
   min-content width, so the column can actually be narrower than the token. */
.elementor .elementor-element.og-footer__col a,
.elementor .elementor-element.og-footer__col p,
.elementor .elementor-element.og-footer__blurb p { overflow-wrap: anywhere; }
.elementor .elementor-element.og-footer__col a:hover { color: var(--og-white); }

.elementor .elementor-element.og-socials { display: flex; flex-direction: row; align-items: center; gap: 1rem; margin-top: 0.375rem; }
.elementor .elementor-element.og-socials .elementor-icon,
.elementor .elementor-element.og-socials .elementor-icon svg {
  color: var(--og-steel);
  fill: var(--og-steel);
  width: 20px;
  height: 20px;
  transition: fill 0.16s var(--og-ease), color 0.16s var(--og-ease);
}
.elementor .elementor-element.og-socials a:hover .elementor-icon,
.elementor .elementor-element.og-socials a:hover .elementor-icon svg { color: var(--og-gold); fill: var(--og-gold); }

.elementor .elementor-element.og-footer__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--og-hairline);
  padding-block: 1.625rem 2.75rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* More specific than the .elementor-heading-title inherit-bridge above
   (which also matches these spans and would otherwise win the tie, since
   its `font: inherit` shorthand resets font-size too) — compounding in
   og-footer__bottom keeps this rule ahead of it regardless of source order. */
.elementor .elementor-element.og-site-footer .elementor-element.og-footer__bottom p,
.elementor .elementor-element.og-site-footer .elementor-element.og-footer__bottom span,
.elementor .elementor-element.og-site-footer .elementor-element.og-footer__bottom .elementor-heading-title {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--og-steel);
}

@media (max-width: 900px) {
  .elementor .elementor-element.og-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (max-width: 640px) {
  .elementor .elementor-element.og-footer__grid { grid-template-columns: 1fr; }
}

/* Elementor's Button widget puts "CSS Classes" on the outer wrapper div; the
   actual clickable element is nested one level deeper as .elementor-button.
   Bridge the .og-btn system down to it so a Button widget tagged
   "og-btn og-btn--primary" renders identically to a real .og-btn.og-btn--primary
   link (values match .og-btn / .og-btn--sm above 1:1). */
.elementor .elementor-element.og-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 17px 30px;
  border-radius: var(--og-radius);
  font-family: var(--og-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1px solid transparent;
}
.elementor .elementor-element.og-btn--primary .elementor-button { background: var(--og-gradient); color: var(--og-white); }
.elementor .elementor-element.og-btn--primary .elementor-button:hover { box-shadow: var(--og-glow); }
.elementor .elementor-element.og-btn--secondary .elementor-button { background: transparent; color: var(--og-white); border-color: var(--og-white); }
.elementor .elementor-element.og-btn--secondary .elementor-button:hover { color: var(--og-gold); border-color: var(--og-gold); }
.elementor .elementor-element.og-btn--gold .elementor-button { background: var(--og-gold); color: var(--og-obsidian); }
.elementor .elementor-element.og-btn--ghost .elementor-button { background: var(--og-surface); color: var(--og-white); border-color: var(--og-border); }
.elementor .elementor-element.og-btn--invert .elementor-button { background: var(--og-white); color: var(--og-maroon); }
.elementor .elementor-element.og-btn--sm .elementor-button { min-height: 44px; padding: 12px 22px; font-size: 0.875rem; }
.elementor .elementor-element.og-btn--invert .elementor-button:hover { box-shadow: 0 0 28px rgba(245, 245, 245, 0.3); }

/* ===========================================================================
   Homepage build (index.html 1:1 — hero, services, stats, process,
   testimonials, pre-footer CTA). Same rules as the header/footer section
   above: og- prefixed classes, compound .elementor-element.og-x selectors,
   no !important. See data/ai/10-wordpress-theme.md for the full gotcha list.
   =========================================================================== */

/* ---- Typography utilities (mirrors .h1-.h4/.lead/.accent in the static build) */
.elementor .elementor-element.og-h1, .elementor .elementor-element.og-h1 .elementor-heading-title {
  font-family: var(--og-font-display); color: var(--og-white); font-size: var(--og-size-h1);
  font-weight: 700; line-height: var(--og-lh-display); letter-spacing: -0.022em;
}
.elementor .elementor-element.og-h2, .elementor .elementor-element.og-h2 .elementor-heading-title {
  font-family: var(--og-font-display); color: var(--og-white); font-size: var(--og-size-h2);
  font-weight: 700; line-height: var(--og-lh-heading); letter-spacing: -0.02em;
}
.elementor .elementor-element.og-h3, .elementor .elementor-element.og-h3 .elementor-heading-title {
  font-family: var(--og-font-display); color: var(--og-white); font-size: var(--og-size-h3);
  font-weight: 600; line-height: 1.25;
}
.elementor .elementor-element.og-h4, .elementor .elementor-element.og-h4 .elementor-heading-title {
  font-family: var(--og-font-display); color: var(--og-white); font-size: var(--og-size-h4);
  font-weight: 600; line-height: 1.3;
}
.elementor .elementor-element.og-lead-2, .elementor .elementor-element.og-lead-2 .elementor-heading-title,
.elementor .elementor-element.og-lead-2 p { font-size: var(--og-size-lead); color: var(--og-steel); margin: 0; }
.elementor .elementor-element.og-accent, .elementor .elementor-element.og-accent .elementor-heading-title,
.elementor .elementor-element.og-accent p {
  font-family: var(--og-font-accent); font-style: italic; font-size: var(--og-size-quote);
  line-height: 1.45; color: var(--og-gold); margin: 0;
}

.elementor .elementor-element.og-eyebrow-row { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; }
.elementor .elementor-element.og-eyebrow-rule { flex: 0 0 32px; height: 1px; background: var(--og-gradient); align-self: center; }
.elementor .elementor-element.og-eyebrow2, .elementor .elementor-element.og-eyebrow2 .elementor-heading-title {
  font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 500;
  letter-spacing: var(--og-track-label); text-transform: uppercase; color: var(--og-steel); margin: 0;
}

.elementor .elementor-element.og-section__head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 820px; }

.elementor .elementor-element.og-stack-lg { display: flex; flex-direction: column; gap: 3.5rem; }
.elementor .elementor-element.og-stack-md { display: flex; flex-direction: column; gap: 2rem; }

/* ---- Hero ---------------------------------------------------------------- */
.elementor .elementor-element.og-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--og-bg);
  padding-block: clamp(4.5rem, 2rem + 10vw, 8rem) clamp(4rem, 2rem + 8vw, 6.25rem);
}
.elementor .elementor-element.og-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px),
    linear-gradient(100deg, var(--og-obsidian) 4%, rgba(10, 10, 10, 0.92) 40%, rgba(10, 10, 10, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.2) 40%, var(--og-obsidian) 100%);
  background-size: 24px 24px, cover, cover;
}
.elementor .elementor-element.og-orb {
  position: absolute; z-index: 2; width: 800px; height: 800px; border-radius: 50%;
  opacity: 0.08; pointer-events: none; left: -200px; bottom: -280px;
  background: radial-gradient(circle, var(--og-crimson) 0%, rgba(176, 32, 64, 0) 68%);
}
.elementor .elementor-element.og-hero .elementor-background-overlay { z-index: 0; }
.elementor .elementor-element.og-hero-inner {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  align-items: flex-start; gap: 1.75rem;
}
/* Measures for og-hero-title / og-hero-lead live in the "Measure" block near
   the end of this file — a widget's max-width needs an extra class to beat
   Elementor's own. */
.elementor .elementor-element.og-hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.875rem; }
.elementor .elementor-element.og-hero-trust { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.elementor .elementor-element.og-hero-logos {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.875rem;
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--og-white); opacity: 0.4;
}
.elementor .elementor-element.og-hero-logos span { display: inline-block; }

/* ---- Services cards -------------------------------------------------------- */
.elementor .elementor-element.og-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--og-gap); }
.elementor .elementor-element.og-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor .elementor-element.og-card {
  position: relative;
  display: flex; flex-direction: column; gap: 1.125rem;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg); padding: 2rem 1.75rem 2.125rem;
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease);
}
.elementor .elementor-element.og-card:hover { transform: translateY(-4px); box-shadow: var(--og-glow-soft); }
/* Maroon gradient left-border accent on hover — .card::before in the static
   build (assets/css/style.css). The card is position:relative already. */
.elementor .elementor-element.og-card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  border-radius: var(--og-radius-lg) 0 0 var(--og-radius-lg);
  background: var(--og-gradient-v);
  opacity: 0;
  transition: opacity 0.18s var(--og-ease);
  pointer-events: none;
}
.elementor .elementor-element.og-card:hover::before { opacity: 1; }

.elementor .elementor-element.og-card .elementor-icon { color: var(--og-gold); background: none; }
.elementor .elementor-element.og-card .elementor-icon svg,
.elementor .elementor-element.og-card .elementor-icon i {
  width: 32px; height: 32px; font-size: 32px; color: var(--og-gold); fill: var(--og-gold);
}
/* The Icon widget's alignment default is CENTER, and it arrives as Elementor's
   own PER-ELEMENT generated CSS —
   `.elementor-40 .elementor-element.elementor-element-xxxxx .elementor-icon-wrapper`
   in post-40.css, three classes deep — so a rule has to clear 0,3,0 to beat
   it, and it is regenerated from the widget's settings on every save. The
   static build's card icon is the first item in a left-aligned column stack
   (.card is `display:flex; flex-direction:column`), so pull it back to the
   left here rather than setting an inline Elementor style on each widget. */
.elementor .elementor-element.og-card .elementor-element .elementor-icon-wrapper,
.elementor .elementor-element.og-card .elementor-element.elementor-widget-icon {
  text-align: left;
}
.elementor .elementor-element.og-card .elementor-heading-title { font-size: var(--og-size-h4); font-weight: 600; color: var(--og-white); }
.elementor .elementor-element.og-card p { color: var(--og-steel); margin: 0; }

/* ---- Stats & proof --------------------------------------------------------- */
.elementor .elementor-element.og-section--alt { background: var(--og-surface-alt); }
.elementor .elementor-element.og-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.elementor .elementor-element.og-stat {
  display: flex; flex-direction: column; gap: 0.75rem; padding-inline: 2rem;
  border-left: 1px solid var(--og-gold-rule);
}
.elementor .elementor-element.og-stat:first-child { padding-left: 0; border-left: none; }
.elementor .elementor-element.og-stat:last-child { padding-right: 0; }
.elementor .elementor-element.og-stat__num, .elementor .elementor-element.og-stat__num .elementor-heading-title {
  font-family: var(--og-font-display); font-size: var(--og-size-stat); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--og-gold); margin: 0;
}
.elementor .elementor-element.og-stat__label, .elementor .elementor-element.og-stat__label .elementor-heading-title {
  font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-proof {
  border-top: 1px solid var(--og-gold-rule); padding-top: 2.75rem; margin-top: 3.75rem;
  display: flex; flex-direction: row; justify-content: center; text-align: center;
}

/* ---- Process steps ---------------------------------------------------------- */
.elementor .elementor-element.og-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--og-gap); }
.elementor .elementor-element.og-step {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.875rem;
  background: var(--og-surface); border-left: 3px solid transparent;
  border-image: var(--og-gradient-v) 1; padding: 1.875rem 2rem 2.125rem;
}
.elementor .elementor-element.og-step--first { border-image: var(--og-gradient-v) 1; }
.elementor .elementor-element.og-step--first .og-step__label,
.elementor .elementor-element.og-step--first .og-step__label .elementor-heading-title { color: var(--og-gold); }
/* The step index is a watermark in the card's top-right corner, lifted out of
   the flow — .step__num in the static build. Left in normal flow (as it was)
   it pushed the label and copy down and read as a heading of its own. .og-step
   is position:relative and overflow:hidden already, so the number clips to the
   card exactly as it does in the reference. */
.elementor .elementor-element.og-step__num {
  position: absolute;
  right: 1.625rem;
  top: 1rem;
  width: auto;
  pointer-events: none;
}
.elementor .elementor-element.og-step__num, .elementor .elementor-element.og-step__num .elementor-heading-title {
  font-family: var(--og-font-accent); font-style: italic; font-size: 3rem; line-height: 1;
  color: rgba(245, 245, 245, 0.15); margin: 0;
}
.elementor .elementor-element.og-step__label, .elementor .elementor-element.og-step__label .elementor-heading-title {
  font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-step__text, .elementor .elementor-element.og-step__text p {
  color: var(--og-steel); margin: 0;   /* measure: see the "Measure" block */
}

/* ---- Testimonials ------------------------------------------------------------ */
.elementor .elementor-element.og-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--og-gap); }
.elementor .elementor-element.og-quote {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.5rem;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg); padding: 2.25rem 2.25rem 2.125rem;
}
/* The card itself is Inter/DM Sans at body size — only the quotation mark and
   the quote's own text are Cormorant italic (Part 3.3: the accent face is for
   pull quotes, italic only). Naming font-style here as well as guarding the
   base .og-quote rule keeps the badge and the byline upright even if this
   card's class is ever reused somewhere that inherits italic. */
.elementor .elementor-element.og-quote {
  font-family: var(--og-font-body);
  font-style: normal;
  font-size: var(--og-size-body);
  color: var(--og-white);
}
/* Watermark in the card's top-right corner, out of the flow — .quote__mark in
   the static build. .og-quote is position:relative + overflow:hidden, so the
   glyph clips against the card edge the same way. */
.elementor .elementor-element.og-quote__mark {
  position: absolute;
  right: 1.875rem;
  top: 0;
  width: auto;
  pointer-events: none;
}
.elementor .elementor-element.og-quote__mark, .elementor .elementor-element.og-quote__mark .elementor-heading-title {
  font-family: var(--og-font-accent); font-style: italic; font-size: 6rem; line-height: 1.1;
  color: rgba(201, 168, 76, 0.3); margin: 0;
}
/* `blockquote` is in this list because the Text Editor widget's content is a
   real <blockquote> (see og_quote() in build-homepage.php) and would otherwise
   pick up the base pull-quote rule at the top of this file — gold Cormorant at
   26px instead of warm white at 22px. */
.elementor .elementor-element.og-quote__text,
.elementor .elementor-element.og-quote__text p,
.elementor .elementor-element.og-quote__text blockquote {
  position: relative; font-family: var(--og-font-accent); font-style: italic;
  font-size: 1.375rem; line-height: 1.5; color: var(--og-white); margin: 0;
}
/* Only the inner .elementor-heading-title gets the pill — putting the
   background and padding on the widget wrapper too draws a second, larger
   pill around the real one (gotcha #3, the .og-btn double-box in another
   shape). The wrapper's only job is to stop stretching across the card. */
.elementor .elementor-element.og-quote__badge { align-self: flex-start; width: auto; }
.elementor .elementor-element.og-quote__badge .elementor-heading-title {
  display: inline-block; background: var(--og-gradient); color: var(--og-white);
  font-family: var(--og-font-display); font-style: normal; font-size: var(--og-size-label); font-weight: 600;
  line-height: var(--og-lh-body); padding: 7px 13px; border-radius: 4px; margin: 0;
}
.elementor .elementor-element.og-quote__by, .elementor .elementor-element.og-quote__by .elementor-heading-title {
  font-family: var(--og-font-display); font-style: normal; font-size: 0.875rem;
  font-weight: 500; line-height: var(--og-lh-body); color: var(--og-steel); margin: 0;
}

/* ---- Pre-footer CTA ------------------------------------------------------------ */
.elementor .elementor-element.og-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--og-gradient); padding-block: clamp(4.5rem, 2rem + 8vw, 6.5rem);
}
.elementor .elementor-element.og-cta .elementor-background-overlay {
  opacity: 0.42; mix-blend-mode: screen; z-index: 1;
}
.elementor .elementor-element.og-cta-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(123, 28, 46, 0.5) 0%, rgba(176, 32, 64, 0.4) 100%),
    radial-gradient(1020px 380px at 50% 50%, rgba(10, 10, 10, 0.66) 0%, rgba(10, 10, 10, 0.44) 62%, rgba(10, 10, 10, 0.06) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.24) 0%, rgba(10, 10, 10, 0) 42%, rgba(10, 10, 10, 0.30) 100%);
}
.elementor .elementor-element.og-cta-inner {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem; text-align: center;
}
.elementor .elementor-element.og-cta-text, .elementor .elementor-element.og-cta-text p {
  color: rgba(245, 245, 245, 0.7); font-size: var(--og-size-lead); margin: 0;   /* measure: see the "Measure" block */
}
/* Enterprise CTA is a left-aligned split (copy | button) instead of Velocity's
   centred stack. */
.elementor .elementor-element.og-cta-inner--split {
  flex-direction: row; align-items: center; justify-content: space-between;
  text-align: left; gap: 4rem;
}
.elementor .elementor-element.og-cta-inner--split .og-cta-text { margin: 0; }
/* The copy column is capped at 680px in the static build (an inline max-width
   on .stack--sm in enterprise.html) — without it the column ate the whole row
   and squeezed the button down to about 210px, wrapping its label onto three
   lines. */
.elementor .elementor-element.og-cta-inner--split .elementor-element.og-split-col {
  max-width: 680px;
  flex: 0 1 680px;
}
/* …and the button keeps its natural width instead of being the thing that
   shrinks. One line, as the CTA formula intends (Part 4.3:
   [Action] + [Outcome] + [Timeframe] reads as one instruction). */
.elementor .elementor-element.og-cta-inner--split .elementor-element.og-btn { flex: 0 0 auto; width: auto; }
.elementor .elementor-element.og-cta-inner .elementor-element.og-btn .elementor-button { white-space: nowrap; }

/* ===========================================================================
   Enterprise page build (enterprise.html 1:1) — reuses og-hero/og-cards/
   og-card/og-cta from the homepage build above with a handful of modifiers,
   plus new pieces: the differentiator band, the operator-model split/
   principles list.
   =========================================================================== */

/* Hero — denser scrim, orb on the right, taller padding, gold eyebrow rule. */
.elementor .elementor-element.og-hero--enterprise {
  padding-block: clamp(5rem, 2rem + 12vw, 9.75rem) clamp(4.5rem, 2rem + 9vw, 8rem);
}
.elementor .elementor-element.og-hero-scrim--dense {
  background-image:
    radial-gradient(rgba(245, 245, 245, 0.04) 1px, transparent 1px),
    linear-gradient(100deg, var(--og-obsidian) 8%, rgba(10, 10, 10, 0.95) 46%, rgba(10, 10, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.3) 40%, var(--og-obsidian) 100%);
  background-size: 28px 28px, cover, cover;
}
.elementor .elementor-element.og-orb--right {
  left: auto; bottom: auto; right: -260px; top: -180px;
  background: radial-gradient(circle, var(--og-maroon) 0%, rgba(123, 28, 46, 0) 68%);
}
.elementor .elementor-element.og-eyebrow--gold .og-eyebrow-rule { background: var(--og-gold); }
.elementor .elementor-element.og-hero-accent, .elementor .elementor-element.og-hero-accent .elementor-heading-title {
  font-family: var(--og-font-accent); font-style: italic; font-size: var(--og-size-quote);
  line-height: 1.45; color: var(--og-gold); margin: 0;   /* measure: see the "Measure" block */
}
.elementor .elementor-element.og-hero-lead--wide p { line-height: 1.7; }
/* enterprise.html sets the hero stack's gap inline at 2rem, a touch wider than
   Velocity's 1.75rem — the same "Measured, Authoritative" restraint that gives
   this tier its calmer motion and denser scrim (Guideline Part 1.1). */
.elementor .elementor-element.og-hero--enterprise .elementor-element.og-hero-inner { gap: 2rem; }

/* Enterprise's CTA scrim is weighted left, where the copy sits, instead of
   Velocity's centred pool — .cta__scrim--dense in the static build. The radii
   stay absolute lengths, never percentages (data/ai/06-invariants.md #18). */
.elementor .elementor-element.og-cta-scrim--dense {
  background-image:
    linear-gradient(135deg, rgba(123, 28, 46, 0.58) 0%, rgba(176, 32, 64, 0.44) 100%),
    radial-gradient(900px 360px at 34% 50%, rgba(10, 10, 10, 0.66) 0%, rgba(10, 10, 10, 0.4) 60%, rgba(10, 10, 10, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.28) 0%, rgba(10, 10, 10, 0.04) 42%, rgba(10, 10, 10, 0.34) 100%);
}

/* Differentiator band */
.elementor .elementor-element.og-band { display: flex; flex-direction: row; justify-content: center; }
.elementor .elementor-element.og-band__inner {
  max-width: 860px; border-top: 1px solid var(--og-gold); border-bottom: 1px solid var(--og-gold);
  padding-block: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; text-align: center;
  align-items: center;
}
.elementor .elementor-element.og-band__quote, .elementor .elementor-element.og-band__quote blockquote {
  font-family: var(--og-font-accent); font-style: italic; font-size: var(--og-size-quote);
  line-height: 1.5; color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-band__eyebrow, .elementor .elementor-element.og-band__eyebrow .elementor-heading-title {
  justify-content: center; letter-spacing: 0.24em; margin: 0;
}

/* Roomy card modifier + numbered index (Enterprise capabilities). */
.elementor .elementor-element.og-card--roomy { gap: 1.25rem; padding: 2.5rem 2.5rem 2.75rem; }
.elementor .elementor-element.og-card__head {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.elementor .elementor-element.og-card__index, .elementor .elementor-element.og-card__index .elementor-heading-title {
  font-family: var(--og-font-accent); font-style: italic; font-size: 2.5rem; line-height: 1;
  color: rgba(245, 245, 245, 0.15); margin: 0;
}

/* Operator model split + numbered principles. */
.elementor .elementor-element.og-split {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(2rem, 1rem + 4vw, 6rem);
}
.elementor .elementor-element.og-split-col { display: flex; flex-direction: column; gap: 1.25rem; }
.elementor .elementor-element.og-principles { display: flex; flex-direction: column; }
.elementor .elementor-element.og-principle {
  display: grid; grid-template-columns: 56px 1fr; gap: 1.5rem; padding-block: 1.75rem;
  border-bottom: 1px solid var(--og-border);
}
.elementor .elementor-element.og-principle:last-child { border-bottom: 0; }
.elementor .elementor-element.og-principle__num, .elementor .elementor-element.og-principle__num .elementor-heading-title {
  font-family: var(--og-font-accent); font-style: italic; font-size: 2rem; line-height: 1.2;
  color: var(--og-gold); margin: 0;
}
.elementor .elementor-element.og-principle__body { display: flex; flex-direction: column; gap: 0.5rem; }

/* ===========================================================================
   Sales page build (/engagements/, wp-theme/build-sales-page.php) — the
   three-tier pricing table and its supporting pieces. Everything else on that
   page reuses the homepage components above: og-hero, og-band, og-cards,
   og-stats, og-proof, og-cta.
   =========================================================================== */

.elementor .elementor-element.og-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--og-gap);
  align-items: stretch;
}

/* Same surface as .og-card, but taller and column-aligned so the three CTAs
   line up along the bottom whatever the bullet lists do. */
.elementor .elementor-element.og-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  padding: 2.25rem 2rem 2.25rem;
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease);
}
.elementor .elementor-element.og-tier:hover { transform: translateY(-4px); box-shadow: var(--og-glow-soft); }

/* The recommended tier carries the maroon gradient edge permanently, where
   every other card only shows it on hover. Emphasis without a "Most popular"
   badge: Part 4.3 asks for proof or nothing, and a badge with no number
   behind it is decoration. */
.elementor .elementor-element.og-tier--featured { border-color: var(--og-gold-rule); }
.elementor .elementor-element.og-tier--featured::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  border-radius: var(--og-radius-lg) 0 0 var(--og-radius-lg);
  background: var(--og-gradient-v);
  pointer-events: none;
}

.elementor .elementor-element.og-tier__name,
.elementor .elementor-element.og-tier__name .elementor-heading-title {
  font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--og-white); margin: 0;
}
/* Inter, not gold: the stat colour is reserved for the proof numbers, and a
   price is not a luxury signal (Part 10.1 — gold sparingly). */
.elementor .elementor-element.og-tier__price,
.elementor .elementor-element.og-tier__price .elementor-heading-title {
  font-family: var(--og-font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.45vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-tier__note,
.elementor .elementor-element.og-tier__note .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-tier__desc,
.elementor .elementor-element.og-tier__desc p {
  color: var(--og-steel); font-size: 0.9375rem; line-height: 1.7; margin: 0;
}

/* The base reset strips list markers, so each item draws its own: a short
   maroon-gradient dash, the Part 3.4 gradient-line motif at bullet scale. */
.elementor .elementor-element.og-tier__list ul {
  display: flex; flex-direction: column; gap: 0.75rem; margin: 0;
}
.elementor .elementor-element.og-tier__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--og-white);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.elementor .elementor-element.og-tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 2px;
  background: var(--og-gradient);
}

/* margin-top:auto is what pins the CTA to the bottom of a stretched card. */
.elementor .elementor-element.og-tier__cta { margin-top: auto; padding-top: 0.75rem; }
.elementor .elementor-element.og-tier__cta .elementor-button { width: 100%; }

.elementor .elementor-element.og-tiers__footnote,
.elementor .elementor-element.og-tiers__footnote p {
  color: var(--og-steel); font-size: 0.875rem; margin: 0;
}

/* Three stats instead of the homepage's four. */
.elementor .elementor-element.og-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* An FAQ answer is prose, not a one-line card caption. */
.elementor .elementor-element.og-faq { gap: 0.875rem; }
.elementor .elementor-element.og-faq p { line-height: 1.7; }

/* ===========================================================================
   Growth pages — the new homepage (build-home-growth.php), the Website /
   Social / Ads pages (build-service-pages.php) and /portfolio/
   (build-portfolio-page.php). Section layout follows geauxlaunch.com; every
   colour, face and size is ours. The portfolio grid, case studies, card
   carousel and sector tabs are the omnigrowthx-widgets plugin's own markup
   and live in that plugin's og-widgets.css, not here.
   Same house rules as everything above: compound .elementor-element.og-x
   selectors, no !important, widget measures in the "Measure" block below.
   =========================================================================== */

/* ---- Accent word in a heading: <span class="og-hl"> inside the title. Gold,
   one per hero — the page's single luxury signal (Part 10.1). It is a real
   nested element, so this is a descendant selector, not compound. */
.elementor .elementor-element .og-hl { color: var(--og-gold); }

/* Portfolio detail hero (2026-10-07, build-portfolio-single.php): obsidian
   with the hero's dot matrix and a soft maroon glow behind the title. The
   section is the template's first container, so Elementor's background
   lazy-load (gotcha #14) never blanks it. */
.elementor .elementor-element.og-cd-hero {
  background-color: var(--og-bg);
  background-image:
    radial-gradient(900px 520px at 88% 0%, rgba(176, 32, 64, 0.16), transparent 70%),
    radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}

/* ---- Section spacing / heads --------------------------------------------- */
.elementor .elementor-element.og-section--tight { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.elementor .elementor-element.og-section__head--center {
  align-items: center; text-align: center; margin-inline: auto;
}
.elementor .elementor-element.og-section__head--center .elementor-element.og-eyebrow-row { justify-content: center; }

/* ---- Heroes ---------------------------------------------------------------- */
.elementor .elementor-element.og-hero--compact,
.elementor .elementor-element.og-hero--page {
  padding-block: clamp(4rem, 2rem + 8vw, 7rem) clamp(3.5rem, 2rem + 6vw, 5.5rem);
}
.elementor .elementor-element.og-hero-note p {
  margin: 0; font-size: 0.875rem; color: var(--og-steel);
}
.elementor .elementor-element.og-hero-note a,
.elementor .elementor-element.og-cta-note a,
.elementor .elementor-element.og-note a {
  color: var(--og-white);
  text-decoration: underline;
  text-decoration-color: var(--og-gold-rule);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s var(--og-ease), color 0.16s var(--og-ease);
}
.elementor .elementor-element.og-hero-note a:hover,
.elementor .elementor-element.og-note a:hover { text-decoration-color: var(--og-gold); }

/* "Operator-led · 28 platforms live" under the CTA, on a hairline. */
.elementor .elementor-element.og-hero-proof {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  width: 100%; max-width: 640px; margin-top: 0.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--og-border);
}
.elementor .elementor-element.og-hero-proof__item,
.elementor .elementor-element.og-hero-proof__item .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.8125rem; font-weight: 500;
  color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-hero-proof__item + .elementor-element.og-hero-proof__item .elementor-heading-title::before {
  content: "\2022"; margin-right: 1.25rem; color: var(--og-gold);
}
/* Hero stats: white numerals, not gold — the gold accent word in the H1 is
   this composition's signal already. */
.elementor .elementor-element.og-stats--hero { width: 100%; margin-top: 0.75rem; }
.elementor .elementor-element.og-stats--hero .elementor-element.og-stat { border-left-color: var(--og-border); }
.elementor .elementor-element.og-stats--hero .og-stat__num .elementor-heading-title,
.elementor .elementor-element.og-stats--hero .elementor-element.og-stat__num {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); color: var(--og-white);
}
.elementor .elementor-element.og-stats--hero .og-stat__label .elementor-heading-title,
.elementor .elementor-element.og-stats--hero .elementor-element.og-stat__label {
  font-size: 0.75rem; letter-spacing: 0.14em;
}

/* Service-page crumb: Home › Website */
.elementor .elementor-element.og-crumbs p {
  margin: 0; font-family: var(--og-font-display); font-size: 0.8125rem; color: var(--og-steel);
}
.elementor .elementor-element.og-crumbs a { color: var(--og-steel); transition: color 0.16s var(--og-ease); }
.elementor .elementor-element.og-crumbs a:hover { color: var(--og-white); }
.elementor .elementor-element.og-crumbs [aria-current] { color: var(--og-white); }
.elementor .elementor-element.og-crumbs [aria-hidden] { margin-inline: 0.4rem; }

/* ---- Client strip ---------------------------------------------------------- */
.elementor .elementor-element.og-trust { padding-block: 1.75rem; border-bottom: 1px solid var(--og-hairline); }
.elementor .elementor-element.og-trust__inner {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2.5rem;
}
.elementor .elementor-element.og-trust__label { width: auto; flex: 0 0 auto; }
/* Full-opacity steel, not the archived hero's 40% white: these are text, not
   logo images, and 40% left them near 3:1 (data/ai/06-invariants.md #32).
   Steel on #0F0F0F is ~5.4:1. */
.elementor .elementor-element.og-trust__names p {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.25rem; margin: 0;
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--og-steel);
}

/* ---- Arrow text link ------------------------------------------------------- */
.elementor .elementor-element.og-textlink p { margin: 0; text-align: center; }
.elementor .elementor-element.og-panel .elementor-element.og-textlink p { text-align: left; }
.elementor .elementor-element.og-textlink a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding-bottom: 4px;
  border-bottom: 1px solid var(--og-gold-rule);
  font-family: var(--og-font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--og-white);
  transition: color 0.16s var(--og-ease), border-color 0.16s var(--og-ease);
}
.elementor .elementor-element.og-textlink a:hover { color: var(--og-gold); border-color: var(--og-gold); }

/* ---- Notes ----------------------------------------------------------------- */
.elementor .elementor-element.og-note p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--og-steel); }
.elementor .elementor-element.og-note--center p { text-align: center; }
.elementor .elementor-element.og-note--band p {
  text-align: center; font-size: var(--og-size-lead); color: var(--og-white);
}
.elementor .elementor-element.og-cta-note p { margin: 0; font-size: 0.875rem; color: rgba(245, 245, 245, 0.8); }

/* ---- Cards with a label and sub-points (ads, ad spend) --------------------- */
.elementor .elementor-element.og-card--ad { gap: 1rem; }
.elementor .elementor-element.og-card__label,
.elementor .elementor-element.og-card__label .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--og-track-label); text-transform: uppercase; color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-subs {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--og-border);
}
.elementor .elementor-element.og-sub { display: flex; flex-direction: column; gap: 0.2rem; }
.elementor .elementor-element.og-sub__term,
.elementor .elementor-element.og-sub__term .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600;
  line-height: 1.4; color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-sub__desc p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--og-steel); }

/* ---- Pricing: service cards, comparison, the full system ------------------- */
.elementor .elementor-element.og-tier__list li strong { font-weight: 600; color: var(--og-white); }
.elementor .elementor-element.og-tier--service .og-tier__list li,
.elementor .elementor-element.og-tier--typical .og-tier__list li { color: var(--og-steel); }
.elementor .elementor-element.og-tier__foot p { margin: 0; font-size: 0.8125rem; color: var(--og-steel); text-align: center; }
/* A monthly price is a longer string than "$499" — "[$X,XXX]/mo" at the
   pricing table's 48px ceiling ran to the card edge at 1440px. */
.elementor .elementor-element.og-tier--service .og-tier__price .elementor-heading-title,
.elementor .elementor-element.og-tier--service .elementor-element.og-tier__price,
.elementor .elementor-element.og-tier--package .og-tier__price .elementor-heading-title,
.elementor .elementor-element.og-tier--package .elementor-element.og-tier__price,
.elementor .elementor-element.og-panel .og-tier__price .elementor-heading-title,
.elementor .elementor-element.og-panel .elementor-element.og-tier__price {
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);
}
/* Beside a feature list the card keeps its own height — the pricing table's
   height:100% (to line three CTAs up) would stretch it to the list's length
   and open a gap above the button. */
.elementor .elementor-element.og-tier--package,
.elementor .elementor-element.og-tier--typical,
.elementor .elementor-element.og-split-aside .elementor-element.og-tier { height: auto; }

.elementor .elementor-element.og-compare {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--og-surface); border: 1px solid var(--og-border); border-radius: var(--og-radius-lg);
}
.elementor .elementor-element.og-compare__head { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.25rem; }
.elementor .elementor-element.og-compare__sub p { margin: 0; font-size: 0.9375rem; color: var(--og-steel); }
.elementor .elementor-element.og-compare__row {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding: 1.125rem 1.25rem;
  background: var(--og-bg); border: 1px solid var(--og-border); border-radius: var(--og-radius);
}
.elementor .elementor-element.og-compare__row--total { border-color: var(--og-gold-rule); }
.elementor .elementor-element.og-compare__row--total::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  border-radius: var(--og-radius) 0 0 var(--og-radius); background: var(--og-gradient-v);
}
.elementor .elementor-element.og-compare__what { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.elementor .elementor-element.og-compare__label,
.elementor .elementor-element.og-compare__label .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600; color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-compare__detail,
.elementor .elementor-element.og-compare__detail .elementor-heading-title {
  font-size: 0.875rem; font-weight: 400; color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-compare__price,
.elementor .elementor-element.og-compare__price .elementor-heading-title {
  font-family: var(--og-font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--og-white); white-space: nowrap; margin: 0;
}
.elementor .elementor-element.og-compare__price { width: auto; flex: 0 0 auto; }
.elementor .elementor-element.og-compare__foot p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--og-steel); }

/* ---- Split: copy + feature list beside an offer card ----------------------- */
.elementor .elementor-element.og-split--offer {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.elementor .elementor-element.og-package { align-items: center; }
.elementor .elementor-element.og-split-aside { display: flex; flex-direction: column; }
.elementor .elementor-element.og-split__lead p + p { margin-top: 1em; }

/* Term / description rows. */
.elementor .elementor-element.og-defs { display: flex; flex-direction: column; margin-top: 0.5rem; border-top: 1px solid var(--og-hairline); }
.elementor .elementor-element.og-def {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.35rem 1.5rem;
  padding-block: 1rem; border-bottom: 1px solid var(--og-hairline);
}
.elementor .elementor-element.og-def__term,
.elementor .elementor-element.og-def__term .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.5;
  color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-def__desc p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--og-steel); }

/* ---- Two processes side by side (homepage) --------------------------------- */
.elementor .elementor-element.og-process {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.elementor .elementor-element.og-process__col { display: flex; flex-direction: column; }
.elementor .elementor-element.og-process__label .elementor-heading-title,
.elementor .elementor-element.og-process__label {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem;
  font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 600;
  letter-spacing: var(--og-track-label); text-transform: uppercase; color: var(--og-white);
}
.elementor .elementor-element.og-process__label .elementor-heading-title::before {
  content: ""; flex: 0 0 32px; height: 1px; background: var(--og-gradient);
}
.elementor .elementor-element.og-pstep {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.375rem; border-top: 1px solid var(--og-hairline);
}
.elementor .elementor-element.og-pstep__num,
.elementor .elementor-element.og-pstep__num .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.9; color: var(--og-steel); margin: 0;
}
.elementor .elementor-element.og-pstep__body { display: flex; flex-direction: column; gap: 0.35rem; }
.elementor .elementor-element.og-pstep__title,
.elementor .elementor-element.og-pstep__title .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.35;
  color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-pstep__text p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--og-steel); }

/* ---- Four-step process cards (service pages) ------------------------------- */
.elementor .elementor-element.og-steps.og-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* At a quarter of the row a two-word label ("Build & Integrate") runs under
   the card's corner numeral; keep the label clear of it. */
.elementor .elementor-element.og-steps--four .elementor-element.og-step__label { padding-right: 2.75rem; }
.elementor .elementor-element.og-steps--four .og-step__label .elementor-heading-title { line-height: 1.5; }

/* ---- Four points strip (Social / Ads) --------------------------------------- */
.elementor .elementor-element.og-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--og-gap); }
.elementor .elementor-element.og-point {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--og-border);
}
.elementor .elementor-element.og-point::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 2px; background: var(--og-gradient);
}
.elementor .elementor-element.og-point__title,
.elementor .elementor-element.og-point__title .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-point__text p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--og-steel); }

/* ---- Panel: copy on the left, chips + a callout on the right --------------- */
.elementor .elementor-element.og-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--og-surface); border: 1px solid var(--og-border); border-radius: var(--og-radius-lg);
}
.elementor .elementor-element.og-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--og-gradient);
}
.elementor .elementor-element.og-panel--ads { align-items: start; }
/* Half a panel is too narrow for the two-column term/description rows. */
.elementor .elementor-element.og-panel .elementor-element.og-def { grid-template-columns: 1fr; }
.elementor .elementor-element.og-panel__main,
.elementor .elementor-element.og-panel__aside { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.elementor .elementor-element.og-panel__text p { margin: 0; color: var(--og-steel); line-height: 1.7; }
.elementor .elementor-element.og-panel__text p + p { margin-top: 1em; }
.elementor .elementor-element.og-panel__label,
.elementor .elementor-element.og-panel__label .elementor-heading-title {
  font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 600;
  letter-spacing: var(--og-track-label); text-transform: uppercase; color: var(--og-white); margin: 0;
}

/* Capability chips (Portfolio page, Website page panel). */
.elementor .elementor-element.og-caps ul { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; }
.elementor .elementor-element.og-caps li {
  padding: 0.7rem 1.1rem; border: 1px solid var(--og-border); border-radius: var(--og-radius);
  background: var(--og-surface); font-family: var(--og-font-display); font-size: 0.9375rem;
  font-weight: 500; line-height: 1.3; color: var(--og-white);
}
.elementor .elementor-element.og-caps--sm li { padding: 0.5rem 0.8rem; font-size: 0.8125rem; background: var(--og-bg); }

.elementor .elementor-element.og-callout {
  display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem 1.5rem;
  background: var(--og-bg); border: 1px solid var(--og-gold-rule); border-radius: var(--og-radius);
}
.elementor .elementor-element.og-callout__title,
.elementor .elementor-element.og-callout__title .elementor-heading-title {
  font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 600; color: var(--og-white); margin: 0;
}
.elementor .elementor-element.og-callout__text p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--og-steel); }

/* ===========================================================================
   Measure — max-width on a WIDGET needs one more class than everything else.

   Elementor 4.x's frontend.min.css carries

     .e-con.e-con > .e-con-inner > .elementor-widget,
     .elementor.elementor .e-con > .elementor-widget { max-width: 100% }

   — note the doubled .e-con / .elementor, which is Elementor deliberately
   buying specificity. Both selectors score 0,4,0, so the house style used
   everywhere else in this file, `.elementor .elementor-element.og-x` (0,3,0),
   loses this one property outright. Nothing errored; every measure simply
   went full-bleed. That is what put the Enterprise hero's copy across the
   whole 1136px row instead of holding it at 660px, and what let the CTA's
   copy column run the full band.

   These rules are the same declarations as the ones further up, restated at
   0,5,0 so they win. CONTAINERS are not affected — Elementor's rule only
   names .elementor-widget — so a max-width on .og-split-col, .og-band__inner
   or .og-section__head still belongs with the rest of its component above.

   If a new widget needs a measure, add it HERE, not next to its component.
   =========================================================================== */
.elementor.elementor.elementor .elementor-element.og-hero-title   { max-width: 940px; }
.elementor.elementor.elementor .elementor-element.og-hero-lead    { max-width: 640px; }
.elementor.elementor.elementor .elementor-element.og-hero-lead--wide { max-width: 660px; }
.elementor.elementor.elementor .elementor-element.og-hero-accent  { max-width: 720px; }
.elementor.elementor.elementor .elementor-element.og-cta-title    { max-width: 820px; }
.elementor.elementor.elementor .elementor-element.og-cta-text     { max-width: 640px; }
.elementor.elementor.elementor .elementor-element.og-step__text   { max-width: 460px; }
.elementor.elementor.elementor .elementor-element.og-quote__text  { max-width: 430px; }
.elementor.elementor.elementor .elementor-element.og-footer__blurb { max-width: 320px; }
/* Growth pages */
.elementor.elementor.elementor .elementor-element.og-head__lead   { max-width: 640px; margin-inline: auto; }
.elementor.elementor.elementor .elementor-element.og-section__head:not(.og-section__head--center) .elementor-element.og-head__lead { margin-inline: 0; }
.elementor.elementor.elementor .elementor-element.og-split__lead  { max-width: 580px; }
.elementor.elementor.elementor .elementor-element.og-note--band   { max-width: 860px; margin-inline: auto; }
.elementor.elementor.elementor .elementor-element.og-note--center { max-width: 720px; margin-inline: auto; }

/* ===========================================================================
   Animation hooks — GSAP + ScrollTrigger, driven by the data-anim attributes
   Elementor Pro's Custom Attributes control writes onto the wrapper
   (wp-theme/build-*.php). Identical to the static build's hooks; see
   data/ai/04-animation-system.md.
   =========================================================================== */

/* Hide animated nodes until GSAP owns their start state, so nothing flashes in
   at full opacity first. anim.js removes .og-anim-pending once the tweens
   exist; the inline <head> script in functions.php removes it after 2.5s
   regardless, so a failed script can never leave the page blank. */
.og-anim-pending [data-anim] { opacity: 0; }

.og-w { display: inline-block; }
.og-mask { display: inline-block; overflow: hidden; vertical-align: top; }

@media (prefers-reduced-motion: reduce) {
  .elementor .elementor-element.og-card:hover { transform: none; }
}

/* ===========================================================================
   Responsive — the same breakpoints, in the same order, as the static build's
   own block (assets/css/style.css). The header's 1024px collapse is handled
   further up, next to the nav.
   =========================================================================== */

@media (max-width: 1080px) {
  .elementor .elementor-element.og-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .elementor-element.og-split { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Growth pages */
  .elementor .elementor-element.og-split--offer { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-steps.og-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .elementor-element.og-panel { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-stats--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0; }
  .elementor .elementor-element.og-stats--hero .elementor-element.og-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .elementor .elementor-element.og-cta-inner--split {
    flex-direction: column; align-items: flex-start; text-align: left; gap: 2rem;
  }
  .elementor .elementor-element.og-cta-inner--split .elementor-element.og-split-col { flex: 0 1 auto; }
}

@media (max-width: 900px) {
  .elementor .elementor-element.og-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 0; }
  .elementor .elementor-element.og-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .elementor .elementor-element.og-stat:nth-child(even) { padding-right: 0; }

  .elementor .elementor-element.og-steps { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-cards--two { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-quotes { grid-template-columns: 1fr; }

  /* Pricing goes 3 -> 1, not 3 -> 2: two-up leaves a single orphan tier on
     the second row, which reads as an afterthought next to the other two. */
  .elementor .elementor-element.og-tiers { grid-template-columns: 1fr; }

  /* Growth pages */
  .elementor .elementor-element.og-process { grid-template-columns: 1fr; gap: 2.5rem; }
  .elementor .elementor-element.og-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--og-gap); }
  /* The base .og-steps rule above drops to one column here; the four-up
     variant holds two until 640px. */
  .elementor .elementor-element.og-steps.og-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* Narrow screens put the copy over the bright facade, so drop the
     directional scrim for a flat, denser one (both tiers). */
  .elementor .elementor-element.og-hero-scrim,
  .elementor .elementor-element.og-hero-scrim--dense {
    background-image:
      radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px),
      linear-gradient(180deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.8) 45%, var(--og-obsidian) 100%);
    background-size: 24px 24px, cover;
  }
  /* Re-frame the photograph the way the static build does below 768px. The
     hero photo is the Container's own background, so this is background-position,
     not object-position. */
  .elementor .elementor-element.og-hero { background-position: 62% 50%; }

  /* A narrow band is nearly square, so `cover` crops the city to a fraction of
     its width and the copy fills the band edge to edge — there is no middle
     left to darken. Both CTA scrims drop the pool for a flat wash. */
  .elementor .elementor-element.og-cta .elementor-background-overlay {
    opacity: 0.34;
    background-position: 50% 62%;
  }
  .elementor .elementor-element.og-cta-scrim,
  .elementor .elementor-element.og-cta-scrim--dense {
    background-image:
      linear-gradient(135deg, rgba(123, 28, 46, 0.6) 0%, rgba(176, 32, 64, 0.32) 100%),
      linear-gradient(180deg, rgba(10, 10, 10, 0.58) 0%, rgba(10, 10, 10, 0.58) 55%, rgba(10, 10, 10, 0.66) 100%);
  }
}

@media (max-width: 640px) {
  .elementor .elementor-element.og-cards { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-stats { grid-template-columns: 1fr; gap: 2rem; }
  .elementor .elementor-element.og-stat { padding-inline: 0; border-left: 0; }

  /* Full-width CTA on mobile · Part 6.1 */
  .elementor .elementor-element.og-hero-actions { align-items: stretch; }
  .elementor .elementor-element.og-hero-actions .elementor-element.og-btn,
  .elementor .elementor-element.og-hero-actions .elementor-element.og-btn .elementor-button { width: 100%; }

  .elementor .elementor-element.og-quote__mark { display: none; }
  .elementor .elementor-element.og-card--roomy { padding: 1.75rem 1.5rem 2rem; }
  .elementor .elementor-element.og-principle { grid-template-columns: 40px 1fr; gap: 1rem; }
  .elementor .elementor-element.og-card__head { gap: 1rem; }
  .elementor .elementor-element.og-step__num { right: 1.25rem; }
  .elementor .elementor-element.og-tier { padding: 1.875rem 1.5rem 2rem; }

  /* Growth pages */
  .elementor .elementor-element.og-steps.og-steps--four,
  .elementor .elementor-element.og-points { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-def { grid-template-columns: 1fr; }
  .elementor .elementor-element.og-compare__row { flex-direction: column; align-items: flex-start; }
  .elementor .elementor-element.og-stats--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .elementor-element.og-stats--hero .elementor-element.og-stat { padding-inline: 0 1rem; border-left: 0; }
  .elementor .elementor-element.og-hero-proof__item + .elementor-element.og-hero-proof__item .elementor-heading-title::before { display: none; }
  .elementor .elementor-element.og-trust__inner { flex-direction: column; gap: 0.875rem; }
}

/* ===========================================================================
   Elementor "Responsive → Hide on desktop / tablet / mobile" (2026-10-07)
   ---------------------------------------------------------------------------
   Elementor's own rule (.elementor .elementor-hidden-desktop, 0,2,0) loses to
   this stylesheet's compound display rules (0,3,0) — a hidden footer column
   or text link stayed visible. Same breakpoints as Elementor's defaults
   (mobile ≤767, tablet ≤1024). Not in the editor, where Elementor shows
   hidden elements dimmed so they can be found and switched back on.
   Used by wp-theme/patch-launch-scope.php to hide links to drafted pages.
   =========================================================================== */
@media (min-width: 1025px) {
  body:not(.elementor-editor-active) .elementor.elementor .elementor-element.elementor-element.elementor-hidden-desktop { display: none; }
  /* A footer column hidden: three tracks instead of four, no empty gap. */
  body:not(.elementor-editor-active) .elementor .elementor-element.og-footer__grid:has(.og-footer__col.elementor-hidden-desktop) { grid-template-columns: 1.6fr 1fr 1.2fr; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body:not(.elementor-editor-active) .elementor.elementor .elementor-element.elementor-element.elementor-hidden-tablet { display: none; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  body:not(.elementor-editor-active) .elementor .elementor-element.og-footer__grid:has(.og-footer__col.elementor-hidden-tablet) { grid-template-columns: 1.6fr 1fr 1.2fr; }
}
@media (max-width: 767px) {
  body:not(.elementor-editor-active) .elementor.elementor .elementor-element.elementor-element.elementor-hidden-mobile { display: none; }
}

/* ===========================================================================
   SME Velocity — conversion page (2026-10-07, build-sme-velocity.php)
   ---------------------------------------------------------------------------
   The team's direct-response brief, in the house tokens. Departures from
   the guideline are the team's call and are listed in
   data/ai/11-growth-pages.md: solid maroon "buy" buttons that pulse, a gold
   badge / stars / seal / progress bar. Only the buy buttons are maroon.
   The brief asked for #6B0F1A; the brand token --og-maroon (#7B1C2E) is used
   (invariant #1) — change --og-fn-buy below if the team insists.
   =========================================================================== */
.elementor .elementor-element.og-fn-stack { display: flex; flex-direction: column; gap: 3rem; }
.elementor .elementor-element.og-fn-head { display: flex; flex-direction: column; gap: 0.875rem; }
.elementor .elementor-element.og-fn-head--center { align-items: center; text-align: center; }
.elementor .elementor-element.og-fn-head--center .elementor-element.og-h2 { max-width: 880px; }
.elementor .elementor-element.og-fn-kicker,
.elementor .elementor-element.og-fn-kicker .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--og-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--og-steel);
}
.elementor .elementor-element.og-fn-kicker .elementor-heading-title::before {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--og-gradient);
}

/* Hero */
.elementor .elementor-element.og-fn-hero {
  background-color: var(--og-bg);
  background-image:
    radial-gradient(900px 560px at 50% 0%, rgba(176, 32, 64, 0.16), transparent 70%),
    radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}
.elementor .elementor-element.og-fn-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.elementor .elementor-element.og-fn-badge .elementor-heading-title {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--og-gold);
  border-radius: 999px;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-gold);
}
.elementor .elementor-element.og-fn-title .elementor-heading-title {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--og-white);
  text-wrap: balance;
}
.elementor .elementor-element.og-fn-title .og-fn-title__more {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.elementor .elementor-element.og-fn-trust ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--og-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--og-steel);
}
.elementor .elementor-element.og-fn-trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.elementor .elementor-element.og-fn-trust li::before { content: "\2713"; color: var(--og-gold); font-weight: 700; }
.elementor .elementor-element.og-fn-visual { margin-top: 1.5rem; }
.elementor .elementor-element.og-fn-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
}

/* The buy button — the only maroon on the page. */
.elementor .elementor-element.og-btn--funnel { --og-fn-buy: var(--og-maroon); }
.elementor .elementor-element.og-btn--funnel .elementor-button {
  min-height: 56px;
  padding: 18px 34px;
  background: var(--og-fn-buy);
  color: var(--og-white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
  animation: og-fn-pulse 2.4s var(--og-ease) infinite;
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease);
}
.elementor .elementor-element.og-btn--funnel .elementor-button:hover,
.elementor .elementor-element.og-btn--funnel .elementor-button:focus-visible {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(201, 168, 76, 0.6);
}
@keyframes og-fn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 32, 64, 0.55); }
  60% { box-shadow: 0 0 0 14px rgba(176, 32, 64, 0); }
}
.elementor .elementor-element.og-fn-cta--block,
.elementor .elementor-element.og-fn-cta--block .elementor-button { width: 100%; }
.elementor .elementor-element.og-fn-cta--xl { align-self: center; }
.elementor .elementor-element.og-fn-cta--xl .elementor-button { min-height: 68px; padding: 22px 48px; font-size: 1.1875rem; }
.elementor .elementor-element.og-fn-secure .elementor-heading-title { margin: 0; font-size: 0.875rem; color: var(--og-steel); text-align: center; }

/* Copy, lists, callouts */
.elementor .elementor-element.og-fn-narrow { display: flex; flex-direction: column; gap: 1.75rem; width: 100%; max-width: 820px; margin-inline: auto; }
.elementor .elementor-element.og-fn-copy p { margin: 0 0 1rem; font-size: var(--og-size-lead); color: var(--og-steel); }
.elementor .elementor-element.og-fn-copy p:last-child { margin-bottom: 0; }
.elementor .elementor-element.og-fn-copy strong { color: var(--og-white); }
.elementor .elementor-element.og-fn-copy--center { max-width: 760px; margin-inline: auto; text-align: center; }
.elementor .elementor-element.og-fn-list ul { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.elementor .elementor-element.og-fn-list li {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 3.25rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  color: var(--og-steel);
  line-height: 1.6;
}
.elementor .elementor-element.og-fn-list li strong { color: var(--og-white); }
.elementor .elementor-element.og-fn-list li::before {
  position: absolute;
  left: 1.2rem;
  top: 1.05rem;
  font-family: var(--og-font-display);
  font-weight: 700;
}
.elementor .elementor-element.og-fn-list--x li::before { content: "\2715"; color: var(--og-crimson); }
.elementor .elementor-element.og-fn-list--check li::before { content: "\2713"; color: var(--og-gold); }
.elementor .elementor-element.og-fn-callout p {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--og-crimson);
  background: rgba(123, 28, 46, 0.12);
  border-radius: 0 var(--og-radius-lg) var(--og-radius-lg) 0;
  font-family: var(--og-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--og-white);
}

/* Engine: pillars + 3-step timeline */
.elementor .elementor-element.og-fn-pillar__num .elementor-heading-title { font-family: var(--og-font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em; color: var(--og-gold); }
.elementor .elementor-element.og-fn-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--og-gap);
  padding-top: 1rem;
}
.elementor .elementor-element.og-fn-timeline::before {
  content: "";
  position: absolute;
  left: 16.6%; right: 16.6%; top: calc(1rem + 22px);
  /* Elementor gives every container's ::before (its background-overlay
     layer) width: 100% — with left set, the line ran 37px past the page. */
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, var(--og-maroon), var(--og-gold));
}
.elementor .elementor-element.og-fn-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.elementor .elementor-element.og-fn-step__num .elementor-heading-title {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--og-gold);
  border-radius: 50%;
  background: var(--og-bg);
  font-family: var(--og-font-display);
  font-weight: 700;
  color: var(--og-gold);
}
.elementor .elementor-element.og-fn-step__title .elementor-heading-title { margin: 0.5rem 0 0; font-family: var(--og-font-display); font-size: var(--og-size-h4); font-weight: 600; color: var(--og-white); }
.elementor .elementor-element.og-fn-step__meta .elementor-heading-title { font-size: var(--og-size-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--og-steel); }

/* Proof */
.elementor .elementor-element.og-fn-stars .elementor-heading-title { font-size: 1rem; letter-spacing: 0.2em; color: var(--og-gold); }
.elementor .elementor-element.og-fn-cite .elementor-heading-title { margin: auto 0 0; font-family: var(--og-font-display); font-size: 0.875rem; font-weight: 600; color: var(--og-white); }
.elementor .elementor-element.og-fn-quote { gap: 1rem; }
.elementor .elementor-element.og-fn-note .elementor-heading-title { margin: 0; text-align: center; font-size: 0.9375rem; font-style: italic; color: var(--og-steel); }

/* Package: value stack + price card */
.elementor .elementor-element.og-fn-offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; }
.elementor .elementor-element.og-fn-offer__stack { display: flex; flex-direction: column; gap: 1.5rem; }
.elementor .elementor-element.og-fn-values li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--og-white); font-weight: 500; }
.elementor .elementor-element.og-fn-values .og-fn-worth { font-size: 0.875rem; font-weight: 400; color: var(--og-steel); }
.elementor .elementor-element.og-fn-total p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--og-gold-rule);
  border-bottom: 1px solid var(--og-gold-rule);
  font-family: var(--og-font-display);
  font-weight: 600;
  color: var(--og-steel);
}
.elementor .elementor-element.og-fn-total strong { color: var(--og-white); font-size: 1.25rem; }
.elementor .elementor-element.og-fn-price {
  position: sticky;
  top: calc(var(--og-header-bottom, 72px) + 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.25rem 2rem 2rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  text-align: center;
}
.elementor .elementor-element.og-fn-price__label .elementor-heading-title { margin: 0; font-size: var(--og-size-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--og-steel); }
.elementor .elementor-element.og-fn-price__was .elementor-heading-title { margin: 0.5rem 0 0; font-family: var(--og-font-display); font-size: 1.5rem; color: var(--og-steel); text-decoration: line-through; text-decoration-color: var(--og-crimson); }
.elementor .elementor-element.og-fn-price__now .elementor-heading-title { margin: 0; font-family: var(--og-font-display); font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--og-white); }
.elementor .elementor-element.og-fn-price__alt .elementor-heading-title { margin: 0 0 1rem; color: var(--og-steel); }
.elementor .elementor-element.og-fn-scarcity { width: 100%; margin-bottom: 1rem; }
.elementor .elementor-element.og-fn-scarcity p {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--og-steel);
  background: rgba(123, 28, 46, 0.12);
  border-left: 2px solid var(--og-crimson);
  text-align: left;
}
.elementor .elementor-element.og-fn-scarcity p + p { margin-top: 0.5rem; }
.elementor .elementor-element.og-fn-scarcity strong { color: var(--og-white); }

/* Guarantee */
.elementor .elementor-element.og-fn-guarantee { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.elementor .elementor-element.og-fn-guarantee__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.elementor .elementor-element.og-fn-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 260px;
  aspect-ratio: 1;
  border: 1px solid var(--og-gold);
  border-radius: 50%;
  outline: 1px solid var(--og-gold-rule);
  outline-offset: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(201, 168, 76, 0.18), transparent 70%);
  text-align: center;
}
.elementor .elementor-element.og-fn-seal__icon .elementor-icon { font-size: 64px; }
.elementor .elementor-element.og-fn-seal__icon .elementor-icon svg { width: 64px; height: 64px; fill: var(--og-gold); }
.elementor .elementor-element.og-fn-seal__label .elementor-heading-title { max-width: 170px; font-family: var(--og-font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: var(--og-gold); }

/* Two choices + countdown */
.elementor .elementor-element.og-fn-choice__label .elementor-heading-title { margin: 0; font-family: var(--og-font-display); font-size: var(--og-size-label); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.elementor .elementor-element.og-fn-choice--away .elementor-element.og-fn-choice__label .elementor-heading-title { color: var(--og-steel); }
.elementor .elementor-element.og-fn-choice--away { opacity: 0.7; }
.elementor .elementor-element.og-fn-choice--go { border-color: var(--og-gold-rule); }
.elementor .elementor-element.og-fn-choice--go .elementor-element.og-fn-choice__label .elementor-heading-title { color: var(--og-gold); }
.elementor .elementor-element.og-fn-countdown { align-self: center; }

/* FAQ */
.elementor .elementor-element.og-fn-faqs { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 820px; margin-inline: auto; }

@media (max-width: 1080px) {
  .elementor .elementor-element.og-fn-offer,
  .elementor .elementor-element.og-fn-guarantee { grid-template-columns: minmax(0, 1fr); }
  .elementor .elementor-element.og-fn-price { position: static; }
  .elementor .elementor-element.og-fn-seal { justify-self: center; margin-inline: auto; }
}
@media (max-width: 900px) {
  .elementor .elementor-element.og-fn-timeline { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .elementor .elementor-element.og-fn-timeline::before { display: none; } /* stacked steps: the line would cross the centred titles */
}
@media (max-width: 640px) {
  .elementor .elementor-element.og-fn-cta--xl .elementor-button { padding: 20px 24px; font-size: 1.0625rem; }
  .elementor .elementor-element.og-fn-seal { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .elementor-element.og-btn--funnel .elementor-button { animation: none; }
  .elementor .elementor-element.og-btn--funnel .elementor-button:hover { transform: none; }
}