/*
Theme Name: Momentium AI
Theme URI: https://momentium-ai.com
Author: Momentium AI / Buzz Clique
Author URI: https://momentium-ai.com
Description: Custom, lightweight theme for Momentium AI. Hand-coded static marketing pages with editorial black/white styling and a single gold accent, plus native WordPress blog templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: momentium-ai
*/

/* ============================================================
   DESIGN TOKENS
   Change brand-wide values here. --gold matches the logo SVG.
   ============================================================ */
:root{
  --ink:#0E0E0F;
  --ink-soft:#1A1A1C;
  --paper:#F6F4F0;
  --paper-2:#EDEAE4;
  --white:#FFFFFF;
  --gray:#44444A;          /* darkened from mockup so it holds up on tinted backgrounds */
  --gray-2:#5A5A60;
  --gray-on-dark:#a1a1a1;   /* WCAG AA contrast against --ink (#0E0E0F): 7.78:1 */
  --gold:#EFBC5E;          /* exact brand gold, taken from the logo SVG */
  --gold-deep:#d9a23e;
  --gold-soft:#F7E3B8;
  --gold-ink:#44444A;       /* dark gray for text/icons that previously used brand gold but failed contrast on light backgrounds. Matches body --gray so the spots read as standard dark text — letting the true brand --gold stand out where it IS used decoratively. ~9:1 on white, ~6.5:1 on gold-soft (all AAA / AA solid). */
  --line:#E2DED7;
  --line-dark:#2C2C2F;
  --display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --radius:16px;
  --radius-sm:12px;
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip-to-content link — hidden off-screen until focused, then slides
   into view at the top-left. Lets keyboard users bypass the nav.
   Targets #content (main element, made programmatically focusable
   via tabindex="-1" in header.php). WCAG 2.4.1 Bypass Blocks. */
.skip-link{
  position:absolute;top:-100px;left:0;z-index:9999;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  padding:14px 22px;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:0;outline:3px solid var(--gold);outline-offset:-3px}
/* Main is programmatically focusable for the skip link; suppress its
   focus ring since the page itself doesn't need a visible outline. */
main#content:focus{outline:none}

/* Global keyboard-focus indicator. Activates on :focus-visible only
   (keyboard / programmatic focus) so mouse clicks don't trigger it.
   More-specific rules (form inputs, .four04-search) override per
   their own style. WCAG 2.4.7 Focus Visible. */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ============================================================
   HIGHLIGHT DEVICES (the brand signature)
   .mark = gold marker swipe behind text
   .uline = gold underline beneath text
   ============================================================ */
/* Gold highlighter accent — sits just below the x-height, narrow enough
   to read as a deliberate accent, and high enough that descenders
   (g/p/q/y) pass clean below it instead of being cut through.
   .mark and .uline are intentionally unified so the gold accent reads
   the same wherever it appears across the site. */
.mark,
.uline{
  background:linear-gradient(180deg,transparent 64%,var(--gold) 64%,var(--gold) 80%,transparent 80%);
  padding:0 .04em;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--ink);flex:none}
.kicker{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray);margin-bottom:18px;
}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;text-wrap:balance}
h2{font-size:clamp(1.85rem,3.2vw,2.45rem);text-wrap:balance}
h3{font-size:1.25rem}
.lede{font-size:1.12rem;color:var(--gray);max-width:34em}
.sub{color:var(--gray);font-size:1.06rem;max-width:42em}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-family:var(--display);font-weight:700;
  font-size:.95rem;text-decoration:none;cursor:pointer;border:1.5px solid var(--ink);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease,box-shadow .3s ease,border-color .25s ease;
  line-height:1;position:relative;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,18,14,.14)}
.btn .mi-icon{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .mi-icon{transform:translateX(3px)}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:var(--ink-soft)}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 12px 30px rgba(217,162,62,.42)}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* Gutenberg core Button block — adopt the theme's button design so editor-inserted
   CTAs render consistently without users having to set colors per block.
   Default = gold (matches .btn-gold). "Outline" style variant = dark outline. */
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px !important;border-radius:999px !important;font-family:var(--display);font-weight:700;
  font-size:.95rem;text-decoration:none;cursor:pointer;border:1.5px solid var(--gold) !important;
  background-color:var(--gold) !important;color:var(--ink) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease,box-shadow .3s ease,border-color .25s ease;
  line-height:1;
}
.wp-block-button .wp-block-button__link:hover{
  background-color:var(--gold-deep) !important;border-color:var(--gold-deep) !important;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(217,162,62,.42);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent !important;border-color:var(--ink) !important;color:var(--ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color:var(--ink) !important;color:var(--paper) !important;
}

/* ============================================================
   HEADER / NAV (dark theme to match footer)
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(14,14,15,.92);
  backdrop-filter:blur(14px);
  color:#fff;
}
/* Soft gold gradient hairline at the bottom of the header — pairs
   with the matching divider at the top of the footer. */
.site-header::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(60%,440px);height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  opacity:.55;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.brand{display:flex;align-items:center;flex:none;transition:opacity .2s ease}
.brand:hover{opacity:.85}
.brand img{height:46px;width:auto}
.primary-nav{display:flex;align-items:center;gap:30px;list-style:none;margin:0;flex:1;justify-content:center}
.primary-nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;color:#fff;
  position:relative;padding:6px 0;display:inline-block;
  transition:color .2s ease;
}
.primary-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .25s ease}
.primary-nav a:hover{color:var(--gold)}
.primary-nav a:hover::after,.primary-nav .current-menu-item>a::after,.primary-nav .current_page_item>a::after{width:100%}
/* Dropdown (Services) — white card pops against dark bar */
.primary-nav li.menu-item-has-children{position:relative}
.primary-nav .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px;min-width:288px;list-style:none;
  box-shadow:0 22px 50px rgba(20,18,14,.4),0 4px 10px rgba(20,18,14,.18);
  opacity:0;visibility:hidden;transition:all .2s ease;
}
.primary-nav li.menu-item-has-children:hover .sub-menu,
.primary-nav li.menu-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.primary-nav .sub-menu a{display:block;padding:10px 14px;border-radius:8px;font-weight:500;white-space:nowrap;color:var(--ink-soft)}
.primary-nav .sub-menu a::after{display:none}
.primary-nav .sub-menu a:hover{background:var(--paper);color:var(--ink)}
.nav-cta{flex:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:30px;height:24px;position:relative}
.nav-toggle span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.3s}
.nav-toggle span:nth-child(1){top:2px}
.nav-toggle span:nth-child(2){top:11px}
.nav-toggle span:nth-child(3){top:20px}
body.nav-open .nav-toggle span:nth-child(1){top:11px;transform:rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* ============================================================
   MOBILE NAV OVERLAY
   Lives as a sibling of .site-header (not nested) so position:fixed
   resolves against the viewport. The header's backdrop-filter would
   otherwise create a new containing block and trap the overlay.
   The header sits above (z-index:100); the overlay sits below (99)
   so the hamburger morphs to an X visibly over it.
   ============================================================ */
.mobile-nav{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:104px 28px 28px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.nav-open .mobile-nav{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear;
}
@media(min-width:861px){ .mobile-nav{display:none} }

.mobile-nav-inner{display:flex;flex-direction:column;flex:1;gap:28px}
.mobile-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}

.mn-item{
  opacity:0;transform:translateY(14px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
body.nav-open .mn-item{opacity:1;transform:translateY(0)}
/* Stagger — each item fades up slightly after the last */
body.nav-open .mn-item:nth-child(1){transition-delay:.10s}
body.nav-open .mn-item:nth-child(2){transition-delay:.16s}
body.nav-open .mn-item:nth-child(3){transition-delay:.22s}
body.nav-open .mn-item:nth-child(4){transition-delay:.28s}
body.nav-open .mn-item:nth-child(5){transition-delay:.34s}
body.nav-open .mn-item:nth-child(6){transition-delay:.40s}

.mn-item > a,
.mn-sub-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  font-family:var(--display);font-weight:700;font-size:1.55rem;
  color:#fff;
  padding:16px 0;
  background:none;border:0;cursor:pointer;
  text-align:left;
  border-bottom:1px solid var(--line-dark);
  position:relative;
  transition:color .2s ease;
}
.mn-item > a:hover,
.mn-sub-toggle:hover{color:var(--gold)}

.mn-chev{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.mn-sub-toggle[aria-expanded="true"] .mn-chev{transform:rotate(180deg)}

.mn-sub{
  list-style:none;margin:0;padding:0;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.mn-sub-toggle[aria-expanded="true"] + .mn-sub{max-height:600px}
.mn-sub li a{
  display:block;
  font-family:var(--display);font-weight:500;font-size:1rem;
  color:var(--gray-on-dark);
  padding:12px 0 12px 18px;
  border-bottom:1px solid var(--line-dark);
  transition:color .2s ease;
}
.mn-sub li:last-child a{border-bottom:0}
.mn-sub li a:hover{color:var(--gold)}

.mobile-nav-foot{
  margin-top:auto;
  display:flex;flex-direction:column;gap:18px;
  padding-top:24px;
  opacity:0;transform:translateY(14px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
body.nav-open .mobile-nav-foot{opacity:1;transform:translateY(0);transition-delay:.5s}

.mobile-nav-contact{display:flex;flex-direction:column;gap:6px;color:var(--gray-on-dark);font-size:.95rem}
.mobile-nav-contact a{transition:color .2s ease}
.mobile-nav-contact a:hover{color:var(--gold)}

.mobile-nav-cta{width:100%;justify-content:center}

/* Lock the page behind the open menu so only the overlay scrolls */
body.nav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mn-item,.mobile-nav-foot,.mn-sub,.mn-chev{transition:none}
  body.nav-open .mn-item,body.nav-open .mobile-nav-foot{transition-delay:0s}
}

/* ============================================================
   SECTIONS / RHYTHM
   ============================================================ */
section{padding:84px 0;position:relative}
section.tight{padding:60px 0}
/* Soft gold gradient hairline at the top of each section so the
   alternating backgrounds bleed into each other instead of hitting a
   hard horizontal line. The .cta-band has its own decoration and the
   hero is the first element on every page, so both are excluded. */
section:not(.cta-band)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(60%,440px);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  opacity:.45;
}
section.bg-dark:not(.cta-band)::before{opacity:.55}
.bg-paper{background:var(--paper)}
.bg-alt{background:var(--paper-2)}
.bg-white{background:var(--white)}
.bg-dark{background:var(--ink);color:var(--white)}
/* Body text on dark sections. Selectors are intentionally chained so this
   wins over later same-specificity rules like .lead-block p / .text-col p
   that would otherwise drag color back to var(--gray) and fail WCAG AA. */
.bg-dark .sub,
.bg-dark .lede,
.bg-dark p,
.bg-dark .lead-block p,
.bg-dark .text-col p,
.bg-dark .prose-list li,
.bg-dark li{color:var(--gray-on-dark)}
.bg-dark .kicker,.bg-dark .eyebrow{color:var(--gold)}
.bg-dark .eyebrow::before{background:var(--gold)}
.section-head{max-width:680px;margin:0 0 50px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin-bottom:16px}
/* Section head with a title block on the left and a CTA on the right
   (used by the home Latest Insights teaser). */
.section-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.section-head.row > div{max-width:560px}
@media(max-width:680px){.section-head.row{flex-direction:column;align-items:flex-start;gap:20px}}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:90px 0 80px;overflow:hidden;position:relative}
/* Soft warm gold glow blobs add atmospheric depth so the hero doesn't read as a flat paper block. */
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--gold-soft) 0%,transparent 68%);
}
.hero::before{width:560px;height:560px;top:-220px;left:-180px;opacity:.55}
.hero::after{width:440px;height:440px;bottom:-180px;right:-120px;opacity:.4}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-grid.solo{grid-template-columns:1fr;max-width:840px}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:30px}
.cursor{display:inline-block;width:3px;height:.88em;background:var(--ink);margin-left:5px;transform:translateY(.06em);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}

/* ============================================================
   CODED HERO ILLUSTRATION (managed-content-system mock)
   Three layered cards that read as a managed-content workflow rather
   than an SEO dashboard:
     - Main: Article in Review (browser bar, title, body lines, brand-
       voice + SEO-ready check pills).
     - Floating KPI: Visibility Growth +87% with a tiny gold sparkline.
     - Floating Image: a Branded Image preview tile.
   Plus a soft warm gold glow behind the composition and a decorative
   gold square accent.
   ============================================================ */
.mock{position:relative;z-index:1}
/* Soft warm gold halo behind the mock — premium underglow. */
.mock::before{
  content:"";position:absolute;
  width:140%;height:130%;left:-20%;top:-15%;
  background:radial-gradient(ellipse at center,rgba(239,188,94,.22) 0%,transparent 60%);
  z-index:-1;pointer-events:none;
}
.mock-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:
    0 1px 0 rgba(20,18,14,.04),
    0 14px 32px rgba(20,18,14,.08),
    0 40px 80px rgba(20,18,14,.10),
    0 80px 140px rgba(20,18,14,.06);
}
.browser-bar{display:flex;gap:7px;margin-bottom:14px}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--paper-2)}
.browser-bar i:first-child{background:#f0c0b0}
.browser-bar i:nth-child(2){background:#f3d99a}
.browser-bar i:nth-child(3){background:#cde2c1}

/* Main: Article in Review */
.mock-main{position:relative;padding:18px 22px 22px;z-index:2;transform:rotate(-1deg)}
.mock-main .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mock-main .mc-title{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink)}
.mock-main .mc-pill{
  font-family:var(--display);font-weight:600;font-size:.66rem;
  color:var(--ink);background:var(--gold-soft);
  padding:4px 10px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;
}
.mock-main .article-preview{padding-top:2px}
.mock-main .ap-title{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);
  line-height:1.3;margin-bottom:16px;letter-spacing:-.01em;
}
.mock-main .ap-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.mock-main .ap-line{display:block;height:6px;background:var(--paper-2);border-radius:3px}
.mock-main .ap-line.short{width:55%}
.mock-main .ap-meta{display:flex;gap:8px;flex-wrap:wrap}
.mock-main .ap-pill{
  font-family:var(--display);font-weight:600;font-size:.66rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:999px;
  letter-spacing:.05em;display:inline-flex;align-items:center;gap:5px;
}
.mock-main .ap-pill .mi-icon{width:11px;height:11px;color:var(--gold-deep)}

/* Floating: Visibility Growth KPI */
.mock-kpi{
  position:absolute;right:-22px;top:-18px;width:180px;padding:14px 16px;
  z-index:4;transform:rotate(2deg);
}
.mock-kpi .label{font-family:var(--display);font-weight:600;font-size:.66rem;color:var(--gray-2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.mock-kpi .value{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:4px}
.mock-kpi .value .pct{color:var(--gold-ink)}
.mock-kpi .mini-chart{width:100%;height:32px;margin:8px 0;display:block}
.mock-kpi .trend-note{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  color:var(--gold-ink);letter-spacing:-.005em;margin-top:2px;
}

/* Floating: Branded Image preview */
.mock-image{
  position:absolute;left:-32px;bottom:-52px;width:210px;padding:10px 10px 14px;
  z-index:3;transform:rotate(-2deg);
}
.mock-image .image-block{
  width:100%;border-radius:8px;
  background:linear-gradient(135deg,var(--paper-2) 0%,var(--gold-soft) 100%);
  position:relative;overflow:hidden;margin-bottom:10px;
  border:1px solid rgba(239,188,94,.3);aspect-ratio:120/70;
}
.mock-image .img-art{position:absolute;inset:0;width:100%;height:100%}
.mock-image .caption{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.mock-image .caption-title{
  font-family:var(--display);font-weight:700;font-size:.76rem;
  color:var(--ink);letter-spacing:-.005em;
}
.mock-image .caption-sub{
  font-family:var(--display);font-weight:500;font-size:.62rem;
  color:var(--gray-2);text-transform:uppercase;letter-spacing:.1em;
}

/* Decorative gold square accent behind composition */
.mock::after{
  content:"";position:absolute;width:72px;height:72px;background:var(--gold);
  border-radius:14px;right:130px;bottom:-78px;z-index:1;opacity:.85;
  transform:rotate(8deg);
}

/* "Human Reviewed" floating badge — small premium signal */
.mock-badge{
  position:absolute;top:-14px;left:-22px;z-index:6;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:7px 14px 7px 7px;
  box-shadow:0 16px 32px rgba(14,14,15,.32),0 4px 10px rgba(14,14,15,.18);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.1em;
  transform:rotate(-3deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.mock-badge .icon-circle{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  color:var(--ink);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.mock-badge .icon-circle .mi-icon{width:11px;height:11px;stroke-width:2.5}
.mock:hover .mock-badge{transform:rotate(-3deg) translateY(-3px)}

/* Subtle hover lift on the whole composition */
.mock:hover .mock-main{transform:rotate(-1deg) translateY(-3px)}
.mock:hover .mock-image{transform:rotate(-2deg) translateY(-3px)}
.mock:hover .mock-kpi{transform:rotate(2deg) translateY(-3px)}
.mock .mock-main,.mock .mock-image,.mock .mock-kpi{
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
   WHY MOMENTIUM WORKS — two large cards consolidating the
   "your business has the raw material" beat and the "managed
   process / pricing" beat into a single premium block.
   ============================================================ */
.wm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:8px}
.wm-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:42px 38px;margin:0;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 1px 0 rgba(20,18,14,.03),0 8px 22px rgba(20,18,14,.06),0 22px 48px rgba(20,18,14,.05);
}
.wm-card .wm-icon{
  width:56px;height:56px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.4);
  display:grid;place-items:center;color:var(--ink);
  margin-bottom:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.wm-card .wm-icon svg{width:28px;height:28px}
.wm-card h3{font-size:1.32rem;line-height:1.3;margin-bottom:14px;letter-spacing:-.01em}
.wm-card p{color:var(--gray);font-size:.98rem;line-height:1.6;margin-bottom:12px}
.wm-card p:last-of-type{margin-bottom:0}

/* Left card: 4 source tiles -> 3 output cards, with dashed gold flow
   lines between them. */
.wm-flow{
  margin-top:28px;
  display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;align-items:center;
}
.wm-sources,.wm-outputs{display:flex;flex-direction:column;gap:10px}
.wm-tile{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:7px 14px 7px 7px;
  font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--ink);
  display:flex;align-items:center;gap:12px;line-height:1.25;
}
.momentium-flow-icon{display:block;width:42px;height:42px;flex:0 0 auto;transition:transform .2s ease}
.wm-tile:hover .momentium-flow-icon,
.wm-output:hover .momentium-flow-icon{transform:translateY(-1px)}
.wm-arrows{position:relative;align-self:stretch;display:flex}
.wm-arrows svg{width:100%;height:100%;display:block}
/* Gold hub node where the 4 source lines converge and the 3 output
   lines diverge. Rendered as HTML (not SVG) so it stays a perfect
   circle regardless of the SVG's preserveAspectRatio:none stretch. */
.wm-arrows .wm-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(239,188,94,.45),0 0 0 1px rgba(239,188,94,.3);
}
.wm-output{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:7px 14px 7px 7px;display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 12px rgba(20,18,14,.05);
  font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--ink);
  line-height:1.25;
}

/* Right card: 8-pill "Included in every plan" grid + pricing line + CTA. */
.wm-included{
  margin-top:26px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.wm-included-label{
  font-family:var(--display);font-weight:700;font-size:.66rem;
  color:var(--gold-ink);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:16px;text-align:center;
}
.wm-included-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* Each pill is now a small vertical icon + label "mini card" so the
   capabilities feel like distinct artifacts of the managed process,
   not a flat text list. */
.wm-pill{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:14px 6px 12px;
  font-family:var(--display);font-weight:600;font-size:.72rem;color:var(--ink);
  text-align:center;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.wm-pill:hover{
  transform:translateY(-2px);
  border-color:rgba(239,188,94,.45);
  box-shadow:0 8px 18px rgba(20,18,14,.06);
}
.wm-pill .momentium-plan-icon{
  display:block;width:38px;height:38px;flex:none;
  transition:transform .25s ease;
}
.wm-pill:hover .momentium-plan-icon{transform:translateY(-1px)}
/* ============================================================
   PRICING BANNER — full-width dark band between "Why Momentium AI
   Works" and "Client Feedback". The dark surface spans full width,
   but the inner content is intentionally narrower / "boxed" so the
   eye lands on the $699 figure rather than the band's edges.
   ============================================================ */
.pricing-banner{padding:48px 0}
.pricing-banner .pb-inner{
  max-width:880px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.pb-text .kicker{color:var(--gold);margin-bottom:10px;display:block}
.pb-text h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.25;
  color:#fff;margin:0;letter-spacing:-.012em;
}
.pb-text h3 strong{color:var(--gold);font-weight:800}
/* Sub-line is intentionally smaller and quieter so the headline carries
   the eye and the "plus setup fee" detail reads as a footnote. */
.pb-text p{
  color:var(--gray-on-dark);font-size:.8rem;letter-spacing:.01em;
  margin:8px 0 0;line-height:1.4;
}
.pb-cta{flex:none}
@media(max-width:680px){
  .pricing-banner .pb-inner{grid-template-columns:1fr;text-align:center;gap:22px}
}

@media(max-width:980px){
  .wm-grid{grid-template-columns:1fr;gap:18px}
  .wm-included-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .wm-card{padding:32px 26px}
  .wm-flow{grid-template-columns:1fr;gap:14px}
  .wm-arrows{display:none}
  .wm-included-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.cards{display:grid;gap:24px}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}
.cards.cols-2{grid-template-columns:repeat(2,1fr)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 6px 14px rgba(20,18,14,.04);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .35s ease;
}
/* Soft gold underglow on hover for the "premium" feel. */
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 0% 0%,var(--gold-soft) 0%,transparent 55%);
  opacity:0;transition:opacity .45s ease;
}
.card > *{position:relative}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 12px rgba(20,18,14,.04),0 18px 38px rgba(20,18,14,.08),0 32px 64px rgba(20,18,14,.07);
  border-color:rgba(239,188,94,.45);
}
.card:hover::before{opacity:.55}

.card .ico{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);
  color:var(--ink);display:grid;place-items:center;margin-bottom:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.card .ico .mi-icon{width:26px;height:26px;stroke-width:1.6}
.card:hover .ico{
  transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 10px 22px rgba(239,188,94,.28),inset 0 1px 0 rgba(255,255,255,.55);
}
/* Bespoke 72x72 service icons used on home + services overview. The
   SVG already carries its own rounded paper-tinted background, so it
   replaces the .ico wrapper rather than nesting inside it. */
.momentium-service-icon{
  display:block;width:72px;height:72px;margin-bottom:22px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.card:hover .momentium-service-icon{transform:translateY(-4px)}
.card h3{margin-bottom:10px}
.card p{color:var(--gray);font-size:.97rem;margin-bottom:14px}
.card .best{font-size:.86rem;color:var(--gray-2);font-style:italic;margin-bottom:14px;display:block}
.card .card-link{font-family:var(--display);font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.card .card-link:hover{color:var(--gold-ink)}
.card .card-link .mi-icon{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.card .card-link:hover .mi-icon{transform:translateX(4px)}
.card.center{text-align:center}
.card.center .ico{margin-left:auto;margin-right:auto}

/* ============================================================
   SPLIT (two column text + media / coded panel)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-media{order:-1}
.split-media{background:var(--paper-2);border-radius:var(--radius);min-height:340px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gray-2);overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover}
.split h2{margin-bottom:18px}

/* mini icon-feature row inside splits */
.mini-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.mini-features .mf .mf-ico{font-size:1.4rem;margin-bottom:10px}
.mini-features .mf h4{font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:7px}
.mini-features .mf p{font-size:.9rem;color:var(--gray)}

/* ============================================================
   "SHORT VERSION" / CHECK LISTS
   ============================================================ */
.checklist{list-style:none;display:grid;gap:14px;margin:6px 0}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem}
.checklist li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);margin-top:3px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/></svg>") center/16px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/></svg>") center/16px no-repeat;
  background-color:var(--gold);
  /* fallback: show a gold dot if mask unsupported */
}
.short-version{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:34px 38px}
.short-version .checklist li{color:var(--white)}
.short-version h3{color:var(--white);margin-bottom:18px;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* generic prose lists used in "be clear about" sections */
.prose-list{list-style:none;display:grid;gap:18px}
.prose-list li{padding-left:22px;position:relative;color:var(--gray);font-size:1.02rem}
.prose-list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--gold)}
.prose-list li strong{color:var(--ink);font-weight:700}

/* Contact page: "What happens after you reach out" — 2x2 of light
   numbered steps. Visually softer than the .step / .pstep patterns
   (no card chrome, smaller numbers) so the section reads as a
   reassuring sequence, not a process diagram. */
.next-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.next-step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.next-step .ns-num{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  color:var(--gold-ink);
  display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  border:1px solid rgba(239,188,94,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.next-step h3{font-size:1.05rem;margin-bottom:5px}
.next-step p{font-size:.97rem;color:var(--gray);line-height:1.6;margin:0}
@media(max-width:760px){
  .next-steps-grid{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   PROCESS STEPS (numbered)
   ============================================================ */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}

/* Card-grid variant — used where vertical stacking gets too long.
   Renders the same .step rows as a 2x2 grid of bordered cards, each
   topped by a bespoke mini-illustration that visualizes the artifact
   that step produces. Cards 2 + 3 carry a paper-2 tinted body so the
   2x2 reads as a diagonal checkerboard rhythm. */
.steps.steps-cards{grid-template-columns:1fr 1fr;gap:24px}
.steps.steps-cards .step{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:var(--radius);
  padding:0;overflow:hidden;
  box-shadow:0 4px 16px rgba(20,18,14,.04);
}
.steps.steps-cards .step:nth-child(2),
.steps.steps-cards .step:nth-child(3){background:var(--paper-2)}
.steps.steps-cards .step-body{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:26px 28px 30px;
}
.steps.steps-cards .step .num{font-size:1.9rem;padding:0 12px}
.steps.steps-cards .step .num::before{width:40px;height:40px}
@media(max-width:760px){
  .steps.steps-cards{grid-template-columns:1fr}
}

/* Unique mini-artifact banner at the top of each step card. */
.step-art{
  position:relative;height:118px;padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
  overflow:hidden;
}
@media(max-width:720px){
  .step-art{height:104px;padding:14px 18px}
}

/* Step 1 — Discovery + topic prioritization. */
.step-art-1{background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%)}
.step-art-1 .sa-search{
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid rgba(20,18,14,.05);
  display:grid;place-items:center;color:var(--gold-deep);flex:none;
  box-shadow:0 6px 18px rgba(20,18,14,.08);
}
.step-art-1 .sa-search .mi-icon{width:22px;height:22px;stroke-width:2}
.step-art-1 .sa-topics{display:flex;flex-direction:column;gap:9px;flex:1}
.step-art-1 .sa-topic{
  height:10px;border-radius:5px;background:#fff;border:1px solid rgba(20,18,14,.06);
}
.step-art-1 .sa-topic.picked{
  height:12px;border:none;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 100%);
  box-shadow:0 4px 10px rgba(239,188,94,.4);
}
.step-art-1 .sa-topic.w1{width:78%}
.step-art-1 .sa-topic.w2{width:92%}
.step-art-1 .sa-topic.w3{width:60%}

/* Step 2 — Draft being created (with AI sparkle + image). */
.step-art-2{background:#fff}
.step-art-2 .sa-doc{
  flex:1;align-self:stretch;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:7px;position:relative;
}
.step-art-2 .sa-doc .ln{height:5px;border-radius:3px;background:var(--line)}
.step-art-2 .sa-doc .ln.title{background:var(--ink);width:58%;height:7px;margin-bottom:2px}
.step-art-2 .sa-doc .ln.med{width:85%}
.step-art-2 .sa-doc .ln.short{width:60%}
.step-art-2 .sa-thumb{
  position:absolute;right:12px;bottom:12px;width:42px;height:28px;border-radius:5px;
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  border:1px solid rgba(20,18,14,.06);
}
.step-art-2 .sa-sparkle{
  position:absolute;top:10px;right:14px;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--gold);display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(20,18,14,.2);
}
.step-art-2 .sa-sparkle .mi-icon{width:14px;height:14px}

/* Step 3 — A single-composition "publish bar" (Save Draft + Preview
   links on the left, gold Publish button on the right, scheduled-time
   caption underneath). Replaces an earlier 4-up checklist that was
   overflowing the 82px inner band and clipping the bottom row. */
.step-art-3{background:#fff}
.step-art-3 .sa-pub{
  flex:1;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.step-art-3 .sa-pub-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.step-art-3 .sa-pub-left{display:flex;align-items:center;gap:16px}
.step-art-3 .sa-pub-link{
  font-family:var(--display);font-weight:600;font-size:.72rem;color:var(--gray);
}
.step-art-3 .sa-pub-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.02em;
  padding:7px 14px;border-radius:999px;
  box-shadow:0 6px 14px rgba(20,18,14,.18);
}
.step-art-3 .sa-pub-btn .mi-icon{color:var(--gold);width:11px;height:11px}
.step-art-3 .sa-pub-caption{
  display:flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-2);
}
.step-art-3 .sa-pub-dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(239,188,94,.22);flex:none;
}

/* Step 4 — Tracking + improvement. Dark inversion dropped entirely;
   now uses card 1's warm-light palette (gold-soft → paper gradient)
   with translucent-ink bars + a gold-deep final bar for the "improvement"
   accent. Card 4 no longer outweighs the rest of the grid. */
.step-art-4{
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--paper) 100%);
  color:var(--ink);
  border-bottom-color:transparent;
}
.step-art-4 .sa-chart{
  flex:1;align-self:stretch;
  display:flex;align-items:flex-end;gap:10px;
}
.step-art-4 .sa-bar{
  flex:1;background:rgba(20,18,14,.16);border-radius:4px 4px 0 0;
}
.step-art-4 .sa-bar.b1{height:36%}
.step-art-4 .sa-bar.b2{height:54%}
.step-art-4 .sa-bar.b3{height:72%}
.step-art-4 .sa-bar.b4{height:92%;background:var(--gold-deep)}
.step-art-4 .sa-trend{
  position:absolute;top:18px;right:22px;
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;color:var(--gold-ink);
  border:1px solid rgba(20,18,14,.06);
  font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  box-shadow:0 4px 10px rgba(20,18,14,.06);
}
.step-art-4 .sa-trend .mi-icon{width:10px;height:10px}
.step .num{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--gold-ink);line-height:1}
.step h3{margin-bottom:8px}
.step p{color:var(--gray)}
.step p+p{margin-top:10px}
.step .why{font-size:.95rem}
.step .why strong{color:var(--ink)}

/* compact horizontal process (home/services) */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}

/* ============================================================
   HOW IT WORKS (home)
   Top: 2-column header — text/CTA on the left, refined 4-card UI
   illustration on the right. Below: full-width row of 4 stage
   descriptions (.process-row).
   ============================================================ */
.hiw-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hiw-text .sub{margin-bottom:0;max-width:38em}
.hiw-stages{margin-top:64px}

/* Right-column 4-card illustration — same visual language as the
   hero mock (white rounded cards, soft shadow stack, subtle rotation,
   soft gold halo behind, decorative gold square peeking from a corner). */
.hiw-illo{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;z-index:1}
.hiw-illo::before{
  content:"";position:absolute;
  width:130%;height:120%;left:-15%;top:-10%;
  background:radial-gradient(ellipse at center,rgba(239,188,94,.20) 0%,transparent 60%);
  z-index:-1;pointer-events:none;
}
.hiw-illo::after{
  content:"";position:absolute;width:60px;height:60px;background:var(--gold);
  border-radius:12px;right:-22px;bottom:-30px;z-index:-1;opacity:.85;
  transform:rotate(8deg);
}
.hiw-illo .pi-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 18px;margin:0;min-height:158px;
  display:flex;flex-direction:column;
  box-shadow:
    0 1px 0 rgba(20,18,14,.03),
    0 8px 18px rgba(20,18,14,.06),
    0 22px 44px rgba(20,18,14,.07);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.hiw-illo .pi-1{transform:rotate(-1.5deg)}
.hiw-illo .pi-2{transform:rotate(1.5deg);margin-top:22px}
.hiw-illo .pi-3{transform:rotate(1.2deg);margin-top:-12px}
.hiw-illo .pi-4{transform:rotate(-1deg)}
.hiw-illo:hover .pi-1{transform:rotate(-1.5deg) translateY(-3px)}
.hiw-illo:hover .pi-2{transform:rotate(1.5deg) translateY(-3px)}
.hiw-illo:hover .pi-3{transform:rotate(1.2deg) translateY(-3px)}
.hiw-illo:hover .pi-4{transform:rotate(-1deg) translateY(-3px)}

.hiw-illo .pi-num{
  display:block;font-family:var(--display);font-weight:700;font-size:.7rem;
  color:var(--gold-ink);letter-spacing:.14em;margin-bottom:5px;
}
.hiw-illo .pi-label{
  font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--ink);margin:0 0 14px;line-height:1.2;
}

/* Per-card abstract motifs */
.hiw-illo .pi-art{flex:1;display:flex;align-items:flex-end}

/* 01 Study — clusters of research lines, one highlighted gold for
   the "insight discovered" beat. */
.hiw-illo .pi-art-study{flex-direction:column;gap:5px;align-items:stretch;justify-content:flex-end}
.hiw-illo .pi-art-study .line{display:block;height:5px;background:var(--paper-2);border-radius:3px}
.hiw-illo .pi-art-study .line.short{width:55%}
.hiw-illo .pi-art-study .gold-line{background:var(--gold);width:70%;height:6px}

/* 02 Create — mini article preview: dark title bar, body lines, soft
   image patch underneath. Clearly reads as "an article in creation". */
.hiw-illo .pi-art-create{flex-direction:column;gap:5px;align-items:stretch;justify-content:flex-end}
.hiw-illo .pi-art-create .title-bar{display:block;height:6px;background:var(--ink);border-radius:3px;width:72%}
.hiw-illo .pi-art-create .line{display:block;height:4px;background:var(--paper-2);border-radius:2px}
.hiw-illo .pi-art-create .line.short{width:48%}
.hiw-illo .pi-art-create .image-patch{
  display:block;height:14px;border-radius:3px;margin-top:3px;
  background:linear-gradient(135deg,var(--paper-2) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);
}

/* 03 Publish — gold check circle + dotted leader line + LIVE pill. */
.hiw-illo .pi-art-publish{align-items:center;gap:8px;justify-content:flex-start}
.hiw-illo .pi-art-publish .check-circle{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  color:var(--ink);display:grid;place-items:center;
  border:1px solid rgba(239,188,94,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.hiw-illo .pi-art-publish .check-circle .mi-icon{stroke-width:2.5;width:15px;height:15px}
.hiw-illo .pi-art-publish .pub-line{
  flex:1;height:0;border-top:1.5px dashed rgba(239,188,94,.55);
}
.hiw-illo .pi-art-publish .live-pill{
  font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--gold-soft);
  padding:4px 9px;border-radius:999px;flex:none;
  border:1px solid rgba(239,188,94,.4);
}

/* 04 Improve — sparkline with gridlines, area fill, intermediate data
   points and a gold latest point. */
.hiw-illo .pi-art-chart{align-items:stretch}
.hiw-illo .pi-art-chart svg{width:100%;height:42px;display:block}

@media(max-width:860px){
  .hiw-header{grid-template-columns:1fr;gap:44px}
  .hiw-stages{margin-top:48px}
  .hiw-illo::after{display:none}
}
.process-row .pstep{position:relative}
.process-row .pstep .pn{font-family:var(--display);font-weight:700;color:var(--gold-ink);font-size:1.4rem;margin-bottom:10px}
.process-row .pstep h3,
.process-row .pstep h4{font-family:var(--display);font-weight:700;font-size:1.02rem;margin-bottom:7px}
.process-row .pstep p{font-size:.9rem;color:var(--gray)}

/* ============================================================
   FAQ ACCORDION (native <details>)
   ============================================================ */
.faq{display:grid;gap:0}
details.q{border-top:1.5px solid var(--ink);padding:22px 0}
details.q:last-child{border-bottom:1.5px solid var(--ink)}
details.q summary{
  font-family:var(--display);font-weight:700;font-size:1.12rem;list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary .chev{
  flex:none;color:var(--gray);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),color .25s ease;
}
details.q summary:hover .chev{color:var(--ink)}
details.q[open] summary .chev{transform:rotate(180deg);color:var(--gold-deep)}
details.q .a{color:var(--gray);margin-top:14px;max-width:60em;animation:fade .35s ease}
details.q .a p+p{margin-top:12px}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}}
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-foot{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--gray);font-size:.92rem;line-height:1.6;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;display:flex;flex-direction:column;position:relative;
  box-shadow:0 6px 18px rgba(20,18,14,.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.tier:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(20,18,14,.08)}
.tier.featured{border:2px solid var(--ink)}
/* Warm gold glow behind the featured tier — subtle premium accent. */
.tier.featured::after{
  content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:120%;height:60%;
  background:radial-gradient(ellipse at center,var(--gold-soft) 0%,transparent 65%);
  opacity:.55;z-index:-1;pointer-events:none;
}
.tier .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.tier h3{font-size:1.4rem;margin-bottom:6px}
.tier .price{font-family:var(--display);font-weight:700;font-size:2.2rem;margin:14px 0 2px}
.tier .price small{font-size:.95rem;font-weight:500;color:var(--gray-2)}
.tier .setup{font-size:.9rem;color:var(--gray-2);margin-bottom:18px}
/* Monthly Content Output inset box — sits between the price block and
   the blurb so buyers can compare what each tier actually produces at
   a glance. Featured tier gets a gold-soft tint to reinforce the
   recommended treatment without changing the structural template. */
.tier .tier-output{
  background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;margin:0 0 22px;
}
.tier .tier-output .to-label{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:5px;
}
.tier .tier-output .to-value{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.02rem;color:var(--ink);line-height:1.3;
}
.tier .tier-output .to-plus{color:var(--gold-ink);margin:0 2px}
.tier.featured .tier-output{background:var(--gold-soft);border-color:transparent}
.tier .blurb{color:var(--gray);font-size:.97rem;margin-bottom:22px}
.tier ul{list-style:none;display:grid;gap:11px;margin-bottom:26px}
.tier ul li{display:flex;gap:11px;font-size:.95rem;color:var(--gray)}
.tier ul li::before{content:"✓";color:var(--gold-deep);font-weight:800;flex:none}
.tier .tier-cta{margin-top:auto}
.tier .tier-cta .btn{width:100%;justify-content:center}
/* Add-ons list — premium compact treatment. Gold square prefix per
   item replaces the previous thin-divider rows so the list feels
   more like a curated menu than a checklist, and tighter row
   padding shrinks the section's vertical footprint when paired with
   the .addons-split two-column layout. */
.addons{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:4px 28px;list-style:none;margin:0;
}
.addons li{
  display:flex;align-items:center;gap:11px;
  padding:7px 0;color:var(--ink);
  font-family:var(--display);font-weight:500;font-size:.95rem;
  letter-spacing:.005em;
}
.addons li::before{
  content:"";flex:none;width:6px;height:6px;
  background:var(--gold);
}
.addons-split{align-items:start;gap:48px}
@media(max-width:760px){
  .addons{grid-template-columns:1fr;gap:2px}
}

/* Compact 3-card reassurance row that follows the pricing plans.
   Lighter than .card defaults (smaller padding, smaller h3, no big
   .ico) so the section reads as quick supporting copy, not another
   major feature block. */
.cards.reassure-cards{gap:20px}
.cards.reassure-cards .card{padding:26px 26px 28px}
.cards.reassure-cards .card h3{font-size:1.1rem;margin:16px 0 8px}
.cards.reassure-cards .card p{font-size:.96rem;line-height:1.65;color:var(--gray);margin:0}
.cards.reassure-cards .re-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  color:var(--gold-ink);
  border:1px solid rgba(239,188,94,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.cards.reassure-cards .re-mark .mi-icon{width:18px;height:18px;stroke-width:1.8}

/* ============================================================
   PLAN STEPS (ascending-height plan-tier cards)
   Used on service pages in the "How it appears in our plans"
   section. Three cards rise in height + gold depth to convey
   ascending scope. Dot indicators give a non-color cue (a11y).
   Uses theme color tokens so the section reads as part of the
   site, not a transplanted component — no outer card bg, all
   typography reuses .kicker / .mark / .btn .btn-outline.
   ============================================================ */
.plan-steps{font-family:var(--display);color:var(--ink)}
.plan-steps__top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;margin:0 0 32px;
}
.plan-steps__h{
  font-size:clamp(1.85rem,3.2vw,2.45rem);line-height:1.15;
  margin:0;max-width:24em;text-wrap:balance;
}
.plan-steps__dir{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray);white-space:nowrap;padding-top:10px;
}
.plan-steps__row{display:flex;align-items:flex-end;gap:18px}
.plan-steps__card{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--radius-sm);padding:22px 24px 24px;min-width:0;
  border:1px solid #3A352C;
}
.plan-steps__card--foundation{min-height:160px;background:#F3EEE3;border-bottom:5px solid var(--gold)}
.plan-steps__card--growth    {min-height:200px;background:#F0E1C2;border-bottom:5px solid var(--gold)}
.plan-steps__card--authority {min-height:240px;background:#E9CF98;border-bottom:5px solid var(--gold)}
.plan-steps__tier{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.plan-steps__tag{
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;
}
.plan-steps__card--foundation .plan-steps__tag{color:#6E5A2E}
.plan-steps__card--growth     .plan-steps__tag{color:#6E5212}
.plan-steps__card--authority  .plan-steps__tag{color:#5C3B0A}
.plan-steps__dots{display:flex;gap:5px}
.plan-steps__dot{width:8px;height:8px;border-radius:50%;border:1px solid #3A352C}
.plan-steps__dot--on{background:#1C1A17}
.plan-steps__name{
  font-size:1.2rem;font-weight:800;color:var(--ink);margin:0 0 8px;line-height:1.25;
}
.plan-steps__desc{font-size:1rem;line-height:1.55;color:var(--gray);margin:0}

/* Mobile: stack cards vertically. Ascending heights don't read in a single
   column, so drop the rising-height illusion and the ↑ direction cue —
   color/border depth + dot indicators still carry the progression. */
@media (max-width:680px){
  .plan-steps__top{flex-direction:column;gap:8px}
  .plan-steps__dir{display:none}
  .plan-steps__row{flex-direction:column;align-items:stretch;gap:12px}
  .plan-steps__card--foundation,
  .plan-steps__card--growth,
  .plan-steps__card--authority{min-height:auto;padding:24px}
}

/* ============================================================
   DARK CTA BAND
   ============================================================ */
.cta-band{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
/* Atmospheric texture: two soft warm-gold radial glows from opposite
   corners plus a subtle center vignette. No striping — reads as a
   premium darkened-room feel rather than utility/SaaS. */
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 0% 100%, rgba(239,188,94,.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(239,188,94,.07) 0%, transparent 50%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-size:clamp(2rem,4.4vw,3.1rem);max-width:16em;margin:0 auto 20px}
.cta-band p{color:var(--gray-on-dark);max-width:34em;margin:0 auto 32px;font-size:1.08rem}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#fff;padding:52px 0 26px;position:relative}
/* Soft gold accent line at the top of the footer — matches the section
   dividers used elsewhere. */
.site-footer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(60%,440px);height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  opacity:.55;
}
.foot-grid{display:grid;grid-template-columns:auto auto auto;gap:48px;justify-content:space-between;align-items:start}
.foot-brand{max-width:360px}
/* Logo SVG has ~5% internal left padding in its viewBox; negative
   margin-left pulls the rendered logo back so its visible letterforms
   align with the tagline and contact rows below. */
.foot-brand img{height:54px;margin:0 0 14px -11px;display:block}
.foot-tagline{color:var(--gray-on-dark);font-size:.88rem;line-height:1.5;max-width:32em;margin-bottom:18px}
.foot-contact{display:grid;gap:9px;color:var(--gray-on-dark);font-size:.88rem}
.foot-contact a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gray-on-dark);transition:color .2s ease}
.foot-contact a:hover{color:var(--gold)}
.foot-contact .ic{color:var(--gold);flex:none;display:inline-grid;place-items:center;width:16px;height:16px}
.foot-contact .ic .mi-icon{width:16px;height:16px}
.foot-col h5{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:8px}
.foot-col a{color:var(--gray-on-dark);text-decoration:none;font-size:.9rem;transition:color .2s}
.foot-col a:hover{color:var(--gold)}
/* Footer bottom row: horizontal legal links with pipe separators
   on top, copyright + Buzz Clique attribution beneath. Centered. */
.foot-bottom{
  color:#a1a1a1;font-size:.78rem;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line-dark);
  text-align:center;
}
.foot-legal{
  list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 18px;
}
.foot-legal li{position:relative}
.foot-legal li + li::before{
  content:"|";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  color:#4a4a4d;font-weight:300;
}
.foot-legal a{
  color:var(--gray-on-dark);text-decoration:none;font-size:.82rem;
  transition:color .2s ease;
}
.foot-legal a:hover{color:var(--gold)}
.foot-copy{margin:0;color:#a1a1a1;font-size:.8rem;line-height:1.5}
.foot-copy a{color:inherit;text-decoration:none;font-weight:inherit;transition:color .2s ease}
.foot-copy a:hover{color:var(--gold)}
@media(max-width:760px){
  .foot-legal{gap:6px 14px}
  .foot-legal li + li::before{left:-9px}
}

/* ============================================================
   BLOG (native WordPress)
   ============================================================ */
.blog-head{padding:70px 0 10px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(20,18,14,.1)}
.post-card .thumb{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-card .meta{font-size:.8rem;color:var(--gray-2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:var(--display)}
.post-card h3{font-size:1.15rem;margin-bottom:10px;line-height:1.25}
.post-card h3 a{text-decoration:none}
.post-card p{color:var(--gray);font-size:.95rem;margin-bottom:16px}
.post-card .more{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.post-card .more:hover{color:var(--gold-ink)}
.post-card .more .mi-icon{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.post-card .more:hover .mi-icon{transform:translateX(4px)}

/* ---------------------------------------------------------------- */
/* Single post — editorial layout with serif drop-cap, gold-marker
   blockquote, refined figure styling, and a small author byline. */
/* ---------------------------------------------------------------- */
.single-hero{padding:72px 0 28px}
.single-hero .meta{font-family:var(--display);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-2);margin-bottom:18px}
.single-hero h1{font-size:clamp(2rem,4vw,3rem);max-width:18em;letter-spacing:-.018em}
.single-hero .byline{display:flex;align-items:center;gap:14px;margin-top:28px}
.single-hero .byline .by-avatar{border-radius:50%;width:44px;height:44px;flex:none}
.single-hero .byline .byline-text{display:flex;flex-direction:column;gap:2px}
.single-hero .byline .by-name{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.single-hero .byline .by-meta{font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--gray-2)}

.single-feature{margin:36px 0;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 44px rgba(20,18,14,.1)}

.entry-content{max-width:760px;margin:0 auto;font-size:1.08rem;line-height:1.75;color:#2a2a30}
.entry-content > *{margin-bottom:1.3em}

.entry-content h2{font-family:var(--display);font-weight:700;font-size:1.7rem;margin-top:2em;margin-bottom:.5em;letter-spacing:-.018em}
.entry-content h3{font-family:var(--display);font-weight:700;font-size:1.28rem;margin-top:1.6em;margin-bottom:.4em}
.entry-content a{color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s ease}
.entry-content a:hover{color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin-bottom:.55em}
.entry-content strong{color:var(--ink)}

/* Refined blockquote — italic sans, gold marker bar, large opening quote */
.entry-content blockquote{
  position:relative;
  margin:40px 0;padding:8px 26px 8px 34px;
  border-left:3px solid var(--gold);
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:1.25rem;line-height:1.55;color:var(--ink);
}
.entry-content blockquote::before{
  content:"\201C";position:absolute;left:22px;top:-10px;
  font-family:var(--display);font-weight:800;font-size:2.8rem;line-height:1;color:var(--gold);
  font-style:normal;
}
.entry-content blockquote p{margin:0}
.entry-content blockquote cite{
  display:block;margin-top:14px;font-style:normal;font-family:var(--display);
  font-weight:600;font-size:.85rem;color:var(--gray-2);letter-spacing:.02em;
}
.entry-content blockquote cite::before{content:"— "}

/* Figures + images */
.entry-content figure{margin:36px 0}
.entry-content img{border-radius:var(--radius-sm);box-shadow:0 14px 32px rgba(20,18,14,.08)}
.entry-content figcaption{
  font-family:var(--display);font-weight:500;font-size:.85rem;color:var(--gray-2);
  text-align:center;margin-top:12px;letter-spacing:.01em;
}

/* Inline code */
.entry-content code{background:var(--paper-2);padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.entry-content pre{background:var(--ink);color:var(--paper);padding:18px 22px;border-radius:var(--radius-sm);overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;line-height:1.55}
.entry-content pre code{background:transparent;padding:0;color:inherit}

/* Horizontal rule */
.entry-content hr{
  border:none;height:1px;margin:48px auto;width:120px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* Article-end module — share row + brand byline. Sits directly after
   .entry-content inside the same bg-paper section so it reads as the
   article's natural wrap-up. Constrained to the same 760px column as
   the article body so they line up visually. */
.entry-end{
  max-width:760px;margin:48px auto 12px;padding-top:32px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:32px;
}
.entry-end-share .kicker{margin-bottom:12px}

/* Byline: the category links inside .by-meta get a soft hover-able
   treatment without competing with the surrounding text weight. */
.single-hero .byline .by-meta a{color:var(--gold-deep);text-decoration:none;font-weight:600}
.single-hero .byline .by-meta a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:50px}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-family:var(--display);font-weight:600;background:var(--white)}
.pagination .page-numbers.current{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--ink)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* The Momentium AI contact form's appearance is owned by the CF7
   form template itself (custom <style> block inside the form), so
   the theme keeps minimal overrides here. Selectors use the section's
   #contact-form id (ID + 2 classes) so they beat the template's
   2-class rules regardless of cascade order. */
.contact-form.momentium-contact .inner-form .privacy-note{margin-top:-4px}
#contact-form .contact-form .mc-header{
  margin-left:auto;margin-right:auto;text-align:center;
}
#contact-form .contact-form .mc-subhead{
  margin-left:auto;margin-right:auto;
}
.contact-direct{background:var(--ink);color:#fff;border-radius:var(--radius);padding:34px 36px}
.contact-direct h3{color:#fff;margin-bottom:20px}
.contact-direct .cd-row{display:flex;align-items:center;gap:13px;margin-bottom:16px;color:var(--gray-on-dark)}
.contact-direct .cd-row a{color:#fff;text-decoration:none;transition:color .2s ease}
.contact-direct .cd-row a:hover{color:var(--gold)}
.contact-direct .ic{color:var(--gold);flex:none;display:inline-grid;place-items:center;width:20px;height:20px}
.contact-direct .ic .mi-icon{width:20px;height:20px}
/* ----------------------------------------------------------------
   Contact Form 7 — refined styling
   Animated focus rings, soft inset shadow, premium submit button with
   gold glow, custom loading spinner that replaces CF7's default,
   refined response (success/error) output.
   ---------------------------------------------------------------- */
.wpcf7-form p{margin-bottom:18px}
.wpcf7-form label{
  display:block;font-family:var(--display);font-weight:600;font-size:.85rem;
  letter-spacing:.02em;margin-bottom:8px;color:var(--ink);
}
.wpcf7-form .wpcf7-form-control-wrap{display:block}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%;padding:15px 18px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--body);font-size:1rem;background:var(--white);color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(20,18,14,.03);
  transition:border-color .25s ease,box-shadow .3s ease,background .25s ease;
  appearance:none;-webkit-appearance:none;
}
.wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{color:var(--gray-2);opacity:.7}
.wpcf7-form input:hover,.wpcf7-form select:hover,.wpcf7-form textarea:hover{border-color:var(--gray-2)}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(239,188,94,.22),inset 0 1px 2px rgba(20,18,14,.04);
}
.wpcf7-form textarea{min-height:140px;resize:vertical;line-height:1.5}
.wpcf7-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344444A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;
  padding-right:46px;cursor:pointer;
}

/* Required-field marker (CF7 doesn't add one — but it does mark the input
   with .wpcf7-validates-as-required so we can style required labels). */
.wpcf7-form label:has(+ .wpcf7-form-control-wrap > .wpcf7-validates-as-required)::after,
.wpcf7-form label:has(.wpcf7-validates-as-required)::after{
  content:"*";color:var(--gold-ink);margin-left:4px;font-weight:700;
}

/* Submit button — pill with gold-ring glow on hover, smooth scale, refined */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type=submit]{
  background:var(--ink);color:var(--paper);border:none;border-radius:999px;
  padding:16px 36px;font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:.01em;cursor:pointer;
  transition:background .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
  box-shadow:0 6px 16px rgba(20,18,14,.14);
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type=submit]:hover{
  background:var(--ink-soft);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(20,18,14,.22),0 0 0 4px rgba(239,188,94,.18);
}
.wpcf7-form .wpcf7-submit:active,
.wpcf7-form input[type=submit]:active{transform:translateY(0)}
.wpcf7-form .wpcf7-submit:disabled,
.wpcf7-form input[type=submit]:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Loading spinner — replaces CF7's default GIF with a clean gold ring */
.wpcf7-form .wpcf7-spinner{
  background:none;width:22px;height:22px;margin:0 0 0 14px;
  border:2.5px solid rgba(239,188,94,.25);
  border-top-color:var(--gold);border-radius:50%;
  visibility:hidden;opacity:0;display:inline-block;vertical-align:middle;
  transition:opacity .2s ease;
}
.wpcf7-form.submitting .wpcf7-spinner{visibility:visible;opacity:1;animation:cf7-spin .8s linear infinite}
@keyframes cf7-spin{to{transform:rotate(360deg)}}

/* Inline validation tip — small soft red below an invalid field */
.wpcf7-form .wpcf7-not-valid-tip{
  display:block;margin-top:6px;font-family:var(--display);font-weight:600;
  font-size:.82rem;color:#b8442b;
}
.wpcf7-form .wpcf7-not-valid{border-color:#d76a4f!important;background:#fdf5f2}

/* Response output (success / error message after submission) */
.wpcf7-form .wpcf7-response-output{
  margin:24px 0 0;padding:16px 18px;border-radius:12px;
  font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.45;
  border:1px solid transparent;
}
.wpcf7-form.sent .wpcf7-response-output{
  background:var(--paper);border-color:rgba(239,188,94,.4);color:var(--ink);
  border-left:4px solid var(--gold);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output{
  background:#fdf5f2;border-color:#e9c2b6;color:#7a2c1a;
  border-left:4px solid #d76a4f;
}

/* Checkbox / radio rows */
.wpcf7-form .wpcf7-checkbox,.wpcf7-form .wpcf7-radio{display:grid;gap:9px}
.wpcf7-form .wpcf7-list-item{display:block;margin:0}
.wpcf7-form .wpcf7-list-item label{font-weight:500;display:flex;gap:11px;align-items:flex-start;margin:0;cursor:pointer;color:var(--gray)}
.wpcf7-form .wpcf7-list-item label:hover{color:var(--ink)}
.wpcf7-form .wpcf7-list-item input{
  width:18px;height:18px;flex:none;margin-top:2px;
  accent-color:var(--gold-deep);cursor:pointer;
}

/* ============================================================
   GENERIC PROSE PAGE (page.php fallback)
   ============================================================ */
.page-content{max-width:760px;margin:0 auto;font-size:1.08rem}
.page-content > *{margin-bottom:1.2em}
.page-content h2{margin-top:1.5em}
.page-content ul,.page-content ol{padding-left:1.4em}

/* lead paragraph helper used across marketing pages */
.lead-block{max-width:48em}
.lead-block h2{margin-bottom:16px}
.lead-block p{color:var(--gray);font-size:1.06rem}
.lead-block p+p{margin-top:14px}
.text-col p{color:var(--gray);font-size:1.04rem}
.text-col p+p{margin-top:16px}
.text-col h2{margin-bottom:18px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .process-row{grid-template-columns:repeat(2,1fr);gap:28px}
  .cards.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav-toggle{display:block}
  .primary-nav,.nav-cta{display:none}
  .hero-grid,.split,.faq-split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .split.reverse .split-media{order:0}
  .cards.cols-3,.cards.cols-2,.pricing-grid,.post-grid{grid-template-columns:1fr}
  .mini-features{grid-template-columns:1fr;gap:18px}
  .mock{margin-top:20px}
  .ai-card{right:0}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  section{padding:60px 0}
}
@media(max-width:520px){
  .wrap{padding:0 20px}
  .step{grid-template-columns:1fr;gap:8px}
  .process-row{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  /* Tighter letter-spacing on mobile so the eyebrow doesn't stretch across
     the screen at small sizes. */
  .eyebrow{letter-spacing:.14em;font-size:.74rem}
  .kicker{letter-spacing:.14em}
}

/* ============================================================
   PREMIUM POLISH
   Scroll reveal, refined section-head depth, process step accents,
   eyebrow line tint, sub-menu animation refinement.
   ============================================================ */

/* Scroll-reveal: opt-in via data-reveal on any element.
   Add data-reveal-delay="100|200|300|400" for staggered children.
   main.js promotes elements to .is-visible as they enter the viewport. */
[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal-delay="100"]{transition-delay:.1s}
[data-reveal-delay="200"]{transition-delay:.2s}
[data-reveal-delay="300"]{transition-delay:.3s}
[data-reveal-delay="400"]{transition-delay:.4s}
[data-reveal-delay="500"]{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  /* Suppress hover transforms + smooth-scroll for users who opted
     out of motion. Covers card-lift, tier-hover, hero-illo-hover,
     and the submit-button press effect. */
  html{scroll-behavior:auto}
  .card,.tier,.hero-illo .illo-card,.step-art,
  .contact-form .contact-submit{transition:none!important}
  .card:hover,.tier:hover,.hero-illo:hover .illo-card,
  .contact-form .contact-submit:active{transform:none!important}
}

/* Eyebrow / kicker gold-tinted accent bar — adds a small premium signal
   without changing the existing markup. */
.eyebrow::before{background:linear-gradient(90deg,var(--gold) 0%,var(--ink) 100%);height:2px;border-radius:1px}
.bg-dark .eyebrow::before{background:linear-gradient(90deg,var(--gold) 0%,rgba(239,188,94,.4) 100%)}

/* Process row: subtle gold connector dot between steps (desktop only). */
.process-row{position:relative}
.process-row .pstep .pn{
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  color:var(--ink);font-size:1.05rem;margin-bottom:14px;
  box-shadow:0 6px 16px rgba(239,188,94,.35),inset 0 1px 0 rgba(255,255,255,.5);
}

/* Numbered .step rows on long process pages — soft gold tint behind the big number. */
.step .num{
  position:relative;display:inline-block;padding:0 14px;
}
.step .num::before{
  content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft) 0%,transparent 70%);
  z-index:-1;
}

/* Site header — slightly stronger blur + subtle shadow on scroll. */
.site-header{box-shadow:0 1px 0 rgba(20,18,14,.04)}

/* Dropdown sub-menu — refined transform origin and shadow. */
.primary-nav .sub-menu{box-shadow:0 22px 50px rgba(20,18,14,.16),0 4px 10px rgba(20,18,14,.05)}
.primary-nav .sub-menu a{transition:background .2s ease,color .2s ease}

/* Refined .ic helper used wherever a label needs a small inline SVG. */
.cta-band .btn-row .btn .mi-icon{width:18px;height:18px}

/* Card .ico responds to hovers from the parent .card naturally; ensure
   .ico icons are not affected by the heavier .card-link arrow rule. */
.card .ico .mi-icon{transition:none}

/* Pagination prev/next arrows: keep them legible if any SVG is used. */
.pagination .mi-icon{width:16px;height:16px;vertical-align:middle}

/* ============================================================
   HERO ILLUSTRATIONS (per-page)
   Shared primitives so each marketing page's hero composition can be
   small and consistent. Each .hero-illo is a positioned canvas; floating
   children use .illo-card (white tile) or .illo-card.dark (inverted),
   small gold square is .illo-square. Per-page CSS positions specific
   tiles.
   ============================================================ */
.hero-illo{position:relative;min-height:340px}
.hero-illo .illo-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:0 1px 0 rgba(20,18,14,.04),0 14px 32px rgba(20,18,14,.07),0 36px 64px rgba(20,18,14,.06);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.hero-illo .illo-card.dark{background:var(--ink);color:#fff;border-color:transparent;box-shadow:0 18px 44px rgba(14,14,15,.3)}
.hero-illo .illo-card.dark p{color:#a1a1a1}
.hero-illo .illo-card .illo-eyebrow{
  font-family:var(--display);font-weight:600;font-size:.66rem;
  color:var(--gray-2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;
}
.hero-illo .illo-card.dark .illo-eyebrow{color:var(--gold)}
.hero-illo .illo-card h4,
.hero-illo .illo-card .illo-title{font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.3}
.hero-illo .illo-card.dark h4{color:#fff}
.hero-illo .illo-square{
  position:absolute;width:72px;height:72px;background:var(--gold);
  border-radius:14px;opacity:.85;z-index:0;transform:rotate(8deg);
}
.hero-illo .illo-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);
}
.hero-illo .illo-pill.solid{background:var(--gold);color:var(--ink)}
.hero-illo .illo-pill.dark{background:var(--ink);color:#fff}
.hero-illo .illo-pill .mi-icon{width:11px;height:11px}
/* Subtle hover lift on the whole composition. */
.hero-illo:hover .illo-card{transform:translateY(-3px)}

/* Composition: About — identity card + agency-backing tile. */
.illo-about .illo-main{position:relative;z-index:2;transform:rotate(-1.5deg);width:88%;margin-left:auto}
.illo-about .illo-main .brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.illo-about .illo-main .brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.illo-about .illo-main .brand-mark .mi-icon{width:20px;height:20px;stroke-width:1.8}
.illo-about .illo-main .brand-name{font-family:var(--display);font-weight:700;font-size:1.05rem}
.illo-about .illo-main p{font-size:.82rem;color:var(--gray);margin:8px 0 14px}
.illo-about .illo-main .meta-row{display:flex;gap:8px;flex-wrap:wrap}
.illo-about .illo-buzz{position:absolute;left:-28px;bottom:-36px;width:62%;z-index:3;transform:rotate(2deg);background:var(--ink);color:#fff;border:none;box-shadow:0 22px 48px rgba(14,14,15,.28)}
.illo-about .illo-buzz .illo-eyebrow{color:var(--gold)}
.illo-about .illo-buzz h4{color:#fff;margin-bottom:4px}
.illo-about .illo-buzz p{color:#a1a1a1;font-size:.78rem;line-height:1.45;margin:0}
.illo-about .illo-square{right:-20px;top:-26px;width:64px;height:64px;transform:rotate(-12deg)}

/* Composition: Services — 4 mini service tiles in a 2x2. */
.illo-services{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 18px 0 0}
.illo-services .mini{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 14px;
  box-shadow:0 10px 24px rgba(20,18,14,.07);
  display:flex;flex-direction:column;gap:8px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.illo-services .mini .mini-ico{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);display:grid;place-items:center;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.illo-services .mini .mini-ico .mi-icon{width:20px;height:20px;stroke-width:1.6}
.illo-services .mini h5{font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1.25}
.illo-services .mini .mini-meta{font-family:var(--display);font-weight:600;font-size:.62rem;color:var(--gray-2);text-transform:uppercase;letter-spacing:.08em}
.illo-services .mini:nth-child(1){transform:rotate(-2deg)}
.illo-services .mini:nth-child(2){transform:rotate(1.5deg)}
.illo-services .mini:nth-child(3){transform:rotate(2deg)}
.illo-services .mini:nth-child(4){transform:rotate(-1deg)}
.illo-services:hover .mini{transform:rotate(0deg) translateY(-2px)}
.illo-services-wrap{position:relative}
.illo-services-wrap .illo-square{right:-14px;bottom:-28px;width:64px;height:64px}

/* Composition: How It Works — WordPress editor draft + Google SERP
   preview. Shows the outcome (a formatted, optimized post ready to
   publish, plus how it appears in search) instead of restating the
   four process steps that already appear as full cards later on the
   page. */
.illo-draft .illo-main{
  position:relative;z-index:2;transform:rotate(-1.5deg);padding:0;overflow:hidden;
  width:84%;margin-right:auto;
}
.illo-draft .editor-chrome{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.illo-draft .ec-dots{display:inline-flex;gap:5px}
.illo-draft .ec-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.illo-draft .ec-publish{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;
}
.illo-draft .ec-publish .mi-icon{color:var(--gold);width:11px;height:11px}
.illo-draft .editor-body{padding:16px 18px 18px;display:grid;gap:9px}
.illo-draft .post-title{
  font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--ink);
  margin-bottom:4px;
}
.illo-draft .post-featured{
  height:64px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--paper) 0%,var(--paper-2) 100%);
  border:1px dashed var(--line);color:var(--gray-2);margin-bottom:4px;
}
.illo-draft .post-line{height:6px;border-radius:3px;background:var(--paper-2)}
.illo-draft .post-line.short{width:78%}

/* Google-style SERP preview that floats over the bottom-right of the
   editor card. Uses neutral grays + ink — no Google blue/green — so it
   reads as 'a search result' without looking like a fake brand. */
.illo-draft .illo-serp{
  position:absolute;right:-12px;bottom:-22px;z-index:3;
  width:62%;padding:14px 16px;transform:rotate(2deg);
}
.illo-draft .serp-url{
  display:flex;align-items:center;gap:7px;margin-bottom:6px;
  font-family:var(--display);font-weight:500;font-size:.66rem;color:var(--gray-2);
}
.illo-draft .serp-favicon{
  width:14px;height:14px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  box-shadow:inset 0 0 0 1px rgba(20,18,14,.05);
}
.illo-draft .serp-host{line-height:1.2}
.illo-draft .serp-crumb{color:var(--gray-2)}
.illo-draft .serp-title{
  font-family:var(--display);font-weight:700;font-size:.82rem;line-height:1.25;
  color:var(--ink);margin-bottom:4px;
}
.illo-draft .serp-snippet{
  font-size:.7rem;line-height:1.45;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.illo-draft .serp-tag{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-family:var(--display);font-weight:600;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);
}
.illo-draft .serp-tag .mi-icon{width:11px;height:11px}

.illo-draft .draft-pill{position:absolute;left:-16px;top:-14px;z-index:4;transform:rotate(-3deg)}
.illo-draft .illo-square{left:-22px;bottom:-24px;width:64px;height:64px;transform:rotate(-10deg)}

/* Composition: Pricing — three mini tier cards stacked. */
.illo-pricing{position:relative;padding-top:18px}
.illo-pricing .tier-mini{
  position:absolute;width:62%;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
  box-shadow:0 14px 30px rgba(20,18,14,.08);
  font-family:var(--display);
}
.illo-pricing .tier-mini .name{font-weight:700;font-size:.82rem}
.illo-pricing .tier-mini .price{font-weight:700;font-size:1.4rem;margin-top:4px;color:var(--ink)}
.illo-pricing .tier-mini .price small{font-weight:500;font-size:.7rem;color:var(--gray-2);margin-left:3px}
.illo-pricing .tier-mini .price-meta{font-size:.7rem;color:var(--gray);margin-top:6px;font-weight:500}

/* Generic "content output" thumbnails — used on the hero illo
   mini-cards AND on the main pricing tier cards next to each plan
   name. Backgrounds use percentages so the post-tile artwork
   (gold title bar + 3 text-line skeletons) scales with the tile size.
   The video tile mirrors the post palette (white + gold) so it reads
   as a sibling, not a contrast bomb. */
.tm-post,.tm-video{flex:none;border-radius:2px}
.tm-post{
  background:
    linear-gradient(rgba(20,18,14,.24) 0 0) center 32% / 62% 1px no-repeat,
    linear-gradient(rgba(20,18,14,.24) 0 0) center 54% / 78% 1px no-repeat,
    linear-gradient(rgba(20,18,14,.24) 0 0) center 76% / 50% 1px no-repeat,
    linear-gradient(180deg,var(--gold) 0 18%,#fff 18% 100%);
  border:1px solid var(--line);
}
.tm-video{
  background:#fff;border:1px solid var(--gold);position:relative;
}
.tm-video::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);
  border-style:solid;border-color:transparent transparent transparent var(--gold-deep);
  width:0;height:0;
}

/* Hero illo: thumb cluster floats in the top-right white space of
   each mini-card. t1 = 2 posts (row), t2 = 2x2 posts, t3 = 4 posts
   with the video filling a 3rd column spanning both rows. */
.illo-pricing .tier-mini .tm-output{
  position:absolute;top:14px;right:12px;
  display:grid;grid-template-columns:repeat(2,16px);gap:3px;
}
.illo-pricing .tier-mini .tm-post{width:16px;height:20px}
.illo-pricing .tier-mini .tm-video::before{border-width:3px 0 3px 5px}
.illo-pricing .tier-mini.t3 .tm-output{grid-template-columns:repeat(3,16px)}
.illo-pricing .tier-mini.t3 .tm-video{
  grid-column:3;grid-row:1 / span 2;
  width:18px;height:auto;
}

.illo-pricing .tier-mini.t1{left:0;top:8px;transform:rotate(-3deg);z-index:1}
.illo-pricing .tier-mini.t2{left:19%;top:78px;transform:rotate(0deg);z-index:3;border:2px solid var(--ink);box-shadow:0 22px 44px rgba(20,18,14,.14)}
.illo-pricing .tier-mini.t2::before{content:"Recommended";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.illo-pricing .tier-mini.t3{right:0;top:160px;transform:rotate(3deg);z-index:2}
.illo-pricing-wrap{position:relative;min-height:300px}

/* Main pricing tier card: graphic next to the plan name. Thumbs are
   larger here (the card has more room) so the artwork reads at the
   same glance value as the hero illo without looking like a downscale. */
.tier .tier-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;
}
.tier .tier-head h3{margin-bottom:0}
.tier .tier-thumbs{display:flex;align-items:center;gap:5px}
.tier .tier-thumbs .tm-post{width:20px;height:26px}
.tier .tier-thumbs .tm-video{width:24px;height:26px}
.tier .tier-thumbs .tm-video::before{border-width:5px 0 5px 7px}
.illo-pricing-wrap .illo-square{right:-10px;bottom:-30px;width:60px;height:60px;transform:rotate(12deg)}

/* Composition: Contact — form preview + reply confirmation. */
.illo-contact .illo-main{position:relative;z-index:2;transform:rotate(-1deg);padding:18px 20px 20px}
.illo-contact .illo-main h4{margin-bottom:12px}
.illo-contact .input{
  height:32px;border-radius:8px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;padding:0 12px;margin-bottom:9px;font-size:.78rem;color:var(--gray)
}
.illo-contact .textarea{height:54px;border-radius:8px;background:var(--paper);border:1px solid var(--line);padding:10px 12px;font-size:.78rem;color:var(--gray);position:relative;margin-bottom:12px}
.illo-contact .textarea::after{content:"";display:inline-block;width:1.5px;height:.9em;background:var(--ink);margin-left:2px;animation:blink 1s steps(2,start) infinite;vertical-align:middle}
.illo-contact .send-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:.78rem;padding:8px 14px;border-radius:999px}
.illo-contact .send-btn .mi-icon{width:14px;height:14px}
.illo-contact .illo-reply{position:absolute;right:-26px;bottom:-30px;width:72%;z-index:3;transform:rotate(2deg);background:var(--ink);color:#fff;border-color:transparent;box-shadow:0 22px 48px rgba(14,14,15,.28);padding:14px 16px}
.illo-contact .illo-reply .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(239,188,94,.25);display:inline-block;margin-right:6px;vertical-align:middle}
.illo-contact .illo-reply h4{color:#fff;margin-bottom:4px}
.illo-contact .illo-reply p{color:#a1a1a1;font-size:.78rem;line-height:1.45;margin:0}
.illo-contact .illo-square{right:-20px;top:-22px;width:60px;height:60px;transform:rotate(-12deg)}

/* ============================================================
   BELIEF / MANIFESTO MOMENT
   Centered editorial pause used to break up long marketing pages —
   large opening quote glyph in gold, italic Plus Jakarta statement,
   small attribution caption.
   ============================================================ */
.belief{text-align:center;max-width:880px;margin:0 auto;padding:30px 32px;position:relative}
.belief::before{
  content:"\201C";display:block;
  font-family:var(--display);font-weight:800;
  font-size:5.5rem;line-height:1;color:var(--gold);opacity:.55;
  margin:0 auto -18px;
}
.belief-text{
  font-family:var(--display);font-weight:600;font-style:italic;
  font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.35;
  color:var(--ink);letter-spacing:-.012em;
  margin:0 auto 22px;max-width:760px;
}
.belief-cite{
  display:block;font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2);
}

/* ============================================================
   SPEED ALONE ISN'T THE POINT — 2-column section on the About
   page. Text on the left, four phase cards on the right (4-wide
   on desktop, 2x2 on tablet, 1-up on mobile) with an integrated
   gold support pill spanning the bottom of the right column.
   Uses theme tokens (no hardcoded colors) so it stays consistent
   with the rest of the site.
   ============================================================ */
.speed-grid{display:grid;grid-template-columns:.9fr 1.5fr;gap:42px;align-items:center}
.speed-text h2{margin-bottom:24px;line-height:1.08;letter-spacing:-.02em}
.speed-text p{color:var(--gray);font-size:1.06rem;line-height:1.7;margin-bottom:18px}
.speed-text p:last-of-type{margin-bottom:0}

/* 2x2 grid (was 4-across). Wider cards = less aggressive text wrap. */
.speed-phases{display:grid;grid-template-columns:repeat(2,1fr);column-gap:18px;row-gap:14px;position:relative}
.phase-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 22px 14px;margin:0;position:relative;
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 8px 22px rgba(20,18,14,.05);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .35s ease;
}
.phase-card:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 14px 32px rgba(20,18,14,.08);
  border-color:rgba(239,188,94,.4);
}
.phase-card .phase-num{
  position:absolute;top:14px;right:18px;
  font-family:var(--display);font-weight:700;font-size:.7rem;
  color:var(--gold-ink);letter-spacing:.14em;
}
.phase-card .phase-icon{display:block;width:42px;height:42px;margin-bottom:10px}
.phase-card h3{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.25;margin:0 0 6px;letter-spacing:-.005em}
.phase-card p{font-family:var(--display);color:var(--gray);font-size:.9rem;line-height:1.5;margin:0}

/* Trust note pill — narrower + shorter than a CTA button. Centered
   inside the .speed-phases grid (spans both columns but capped by
   max-width). Reads as a small reassurance, not a primary action. */
.phase-support{
  grid-column:1 / -1;justify-self:center;
  display:inline-flex;align-items:center;gap:9px;
  max-width:540px;
  padding:7px 18px;margin-top:8px;
  background:linear-gradient(135deg,#fffaf0 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);border-radius:999px;
  color:var(--ink);font-family:var(--display);font-weight:600;font-size:.8rem;
  text-align:center;line-height:1.4;
  box-shadow:0 3px 10px rgba(239,188,94,.12);
}
.phase-support .phase-check{
  width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--gold);color:var(--ink);
  display:inline-grid;place-items:center;
  border:1px solid rgba(239,188,94,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.phase-support .phase-check .mi-icon{stroke-width:3}

@media(max-width:980px){
  .speed-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:620px){
  .speed-phases{grid-template-columns:1fr}
  .phase-support{border-radius:14px;padding:12px 16px;text-align:left;align-items:flex-start}
}

/* ============================================================
   TRUST BAND — slim gold-tinted pill used below the about page's
   process row and Buzz Clique panel. Small reassurance line.
   ============================================================ */
.trust-band{
  display:flex;align-items:center;gap:10px;
  width:fit-content;max-width:560px;
  margin:36px auto 0;
  padding:9px 20px;
  background:linear-gradient(135deg,#fffaf0 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);
  border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  color:var(--ink);text-align:center;line-height:1.4;
  box-shadow:0 3px 10px rgba(239,188,94,.12);
}
.trust-band .tb-check{
  display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--gold);color:var(--ink);
  border:1px solid rgba(239,188,94,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.trust-band .tb-check .mi-icon{stroke-width:3}

/* ============================================================
   FIT / NOT-A-FIT comparison (about page).
   Two side-by-side cards: gold-tinted "A good fit if you…" and
   neutral "Probably not the fit if…".
   ============================================================ */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;align-items:stretch}
.fit-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 8px 22px rgba(20,18,14,.06);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .35s ease;
}
.fit-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(20,18,14,.02),0 14px 32px rgba(20,18,14,.08)}
.fit-card--good{border-color:rgba(239,188,94,.5)}
.fit-card--good:hover{border-color:rgba(239,188,94,.7)}
/* Right card: warm muted tone — no red, no negative-feedback feel.
   Tan-stone border + light warm-gray badge so the eye reads "less
   aligned" rather than "warning". */
.fit-card--bad{border-color:rgba(120,108,88,.22)}
.fit-card--bad:hover{border-color:rgba(120,108,88,.35)}
.fit-head{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.fit-head h3{font-size:1.08rem;line-height:1.25;margin:0}
.fit-mark{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;
}
.fit-mark--good{
  background:linear-gradient(135deg,var(--gold-soft) 0%,var(--gold) 100%);
  color:var(--ink);
  border:1px solid rgba(239,188,94,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.fit-mark--good .mi-icon{stroke-width:2.6}
.fit-mark--bad{
  background:linear-gradient(135deg,#ece4d6 0%,#d8cfbd 100%);
  color:#6a5f4d;
  border:1px solid rgba(120,108,88,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.fit-mark--bad .mi-icon{stroke-width:2.6}
.fit-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fit-list li{
  padding-left:20px;position:relative;
  color:var(--gray);font-size:.95rem;line-height:1.55;
}
.fit-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}
.fit-card--bad .fit-list li::before{background:#b8aa90}
@media(max-width:860px){.fit-grid{grid-template-columns:1fr;gap:16px}}

/* ============================================================
   BUZZ CLIQUE panel — Momentium AI + Buzz Clique logos side by
   side with a gold "+" connector and a service-capability tag row
   below.
   ============================================================ */
.bc-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 40px;margin-top:40px;
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 8px 22px rgba(20,18,14,.06),0 22px 48px rgba(20,18,14,.05);
}
.bc-logos{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin-bottom:32px}
.bc-brand{text-align:center}
.bc-brand img{width:auto;display:block;margin:0 auto 14px;object-fit:contain}
/* Per-brand logo sizing — Momentium AI is the page's primary brand
   and Buzz Clique is the supporting one, so Momentium reads bigger.
   The aspect ratio difference (4:1 vs ~5.5:1) also gives Buzz Clique
   extra visual width per pixel of height, so its height is held back
   relative to Momentium. */
.bc-brand--momentium img{height:48px}
.bc-brand--buzz img{height:30px}
.bc-brand p{font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--gray);margin:0;line-height:1.45;max-width:24em;margin-left:auto;margin-right:auto}
/* Refined "+" connector — smaller, softer, less prominent. */
.bc-connector{
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:1.15rem;
  color:var(--gold-ink);
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.bc-services{border-top:1px solid var(--line);padding-top:24px;text-align:center}
.bc-service-label{
  display:block;font-family:var(--display);font-weight:700;font-size:.7rem;
  color:var(--gray-2);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
}
.bc-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* Capability pills — soft off-white fill, warm-gray border, generous
   horizontal padding, no icons. Quiet by design. */
.bc-tag{
  background:#fdfaf3;
  border:1px solid rgba(120,108,88,.22);
  border-radius:999px;
  padding:8px 18px;
  font-family:var(--display);font-weight:600;font-size:.76rem;color:var(--ink);
  letter-spacing:.01em;
}
@media(max-width:680px){
  .bc-panel{padding:32px 22px}
  .bc-logos{grid-template-columns:1fr;gap:20px}
  .bc-connector{margin:0 auto}
}

/* ============================================================
   PRINCIPLES (3-column value-prop row)
   Lightweight version of .cards.cols-3 with no card chrome —
   just gold-tinted icon, heading, paragraph. Used on home/about
   to set the brand's commitments above the noise.
   ============================================================ */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.principles .principle{text-align:left}
.principles .principle .p-ico{
  display:inline-grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
  border:1px solid rgba(239,188,94,.35);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);margin-bottom:20px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.principles .principle:hover .p-ico{transform:translateY(-3px) rotate(-3deg)}
.principles .principle .p-ico .mi-icon{width:26px;height:26px;stroke-width:1.6}
.principles .principle h3{font-size:1.15rem;margin-bottom:10px}
.principles .principle p{color:var(--gray);font-size:.98rem;line-height:1.65}
@media(max-width:860px){.principles{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   404 — soft-gold oversized "404" mark + refined inline search form
   ============================================================ */
.four04{
  font-family:var(--display);font-weight:800;
  font-size:clamp(7rem,18vw,11rem);line-height:.85;letter-spacing:-.05em;
  color:var(--gold-soft);
  margin-bottom:-4px;user-select:none;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.four04-search{margin:56px auto 0;max-width:480px}
.four04-search .search-form{
  display:flex;gap:8px;align-items:stretch;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:6px 6px 6px 20px;
  box-shadow:0 6px 18px rgba(20,18,14,.06);
  transition:border-color .25s ease,box-shadow .3s ease;
}
.four04-search .search-form:focus-within{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(239,188,94,.22),0 6px 18px rgba(20,18,14,.06);
}
.four04-search .search-form label{flex:1;display:flex;align-items:center;margin:0}
.four04-search .search-form .search-field{
  width:100%;border:none;background:transparent;
  font-family:var(--body);font-size:1rem;color:var(--ink);
  padding:8px 0;
}
.four04-search .search-form .search-field:focus{outline:none}
.four04-search .search-form .search-field::placeholder{color:var(--gray-2)}
.four04-search .search-form .search-submit{
  background:var(--ink);color:#fff;border:none;border-radius:999px;
  padding:10px 22px;font-family:var(--display);font-weight:700;font-size:.88rem;
  cursor:pointer;transition:background .25s ease,transform .2s ease;
  flex:none;
}
.four04-search .search-form .search-submit:hover{background:var(--ink-soft);transform:translateY(-1px)}

/* ============================================================
   CLIENT FEEDBACK (3-card grid)
   Refined, intentional layout: category label + thin gold accent line
   at the top, italic quote body, anonymous attribution + service
   context at the bottom separated by a hairline. Equal-height cards
   via flex column with margin-top:auto on the attribution block.
   ============================================================ */
/* 3 columns; the middle column gets a little extra width and the
   .t-card--featured inside it gets a touch more padding, so the
   center quote reads as the visual anchor without changing the
   card style otherwise. */
.testimonials{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:24px;align-items:stretch}
.t-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px 30px;margin:0;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 6px 14px rgba(20,18,14,.04);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .35s ease;
}
/* Featured (middle) card: gold-tinted border + a slight outer gold ring
   + deeper shadow stack to make it read as the visual anchor. */
.t-card--featured{
  padding:38px 36px 34px;
  border-color:rgba(239,188,94,.55);
  box-shadow:
    0 0 0 1px rgba(239,188,94,.22),
    0 1px 0 rgba(20,18,14,.03),
    0 12px 28px rgba(20,18,14,.08),
    0 28px 56px rgba(20,18,14,.07);
}
.t-card--featured:hover{
  border-color:rgba(239,188,94,.7);
  box-shadow:
    0 0 0 1px rgba(239,188,94,.3),
    0 1px 0 rgba(20,18,14,.03),
    0 16px 36px rgba(20,18,14,.10),
    0 32px 64px rgba(20,18,14,.08);
}
.t-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(20,18,14,.02),0 14px 32px rgba(20,18,14,.07),0 30px 60px rgba(20,18,14,.06);
  border-color:rgba(239,188,94,.4);
}
/* Category header */
.t-card .t-category{margin-bottom:20px}
.t-card .t-cat-label{
  display:block;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:10px;
}
.t-card .t-accent{
  display:block;width:28px;height:2px;
  background:var(--gold);border-radius:1px;
}
/* Quote body */
.t-card blockquote{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:1.05rem;line-height:1.6;color:var(--ink);
  margin:0 0 24px;border:none;padding:0;
}
/* Attribution pinned to bottom of card via margin-top:auto, separated
   from the quote by a soft hairline so the two read as distinct blocks. */
.t-card .t-attribution{
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line);
}
.t-card .t-who{
  font-family:var(--display);font-weight:700;font-size:.9rem;
  color:var(--ink);margin-bottom:3px;line-height:1.35;
}
.t-card .t-context{
  font-family:var(--display);font-weight:500;font-size:.78rem;
  color:var(--gray-2);line-height:1.4;
}
@media(max-width:860px){
  .testimonials{grid-template-columns:1fr;gap:16px}
  .t-card{padding:28px 26px 24px}
}

/* ============================================================
   PHOTO MEDIA PRIMITIVES (used by .image-text and the About hero)
   .it-media — positioned aspect-ratio canvas
   .it-frame — actual rounded image clip with shadow stack
   .it-tag   — small dark overlay tile sitting on the photo
   .it-square (default ::after) — gold square decoration
   ============================================================ */
.it-media{position:relative;border-radius:var(--radius);overflow:visible;aspect-ratio:5/4}
.it-frame{
  position:relative;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 22px 52px rgba(20,18,14,.13),0 4px 12px rgba(20,18,14,.05);
  background:linear-gradient(135deg,var(--paper-2),var(--paper));
}
.it-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.it-media::after{
  content:"";position:absolute;width:88px;height:88px;background:var(--gold);
  border-radius:16px;bottom:-26px;right:-22px;opacity:.85;transform:rotate(8deg);
  z-index:-1;
}
.it-tag{
  position:absolute;left:-18px;bottom:30px;z-index:2;
  background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;
  box-shadow:0 18px 38px rgba(14,14,15,.28);
  font-family:var(--display);max-width:260px;
}
.it-tag .ie{font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.it-tag .t{font-weight:700;font-size:.95rem;line-height:1.3}

/* ============================================================
   IMAGE-TEXT (two-column alternating section using the primitives)
   Default: photo left, text right. .flip swaps the order.
   ============================================================ */
.image-text{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.image-text:hover .it-frame img{transform:scale(1.03)}
.image-text.flip .it-media::after{right:auto;left:-22px;transform:rotate(-8deg)}
.image-text.flip .it-media{order:1}
.image-text.flip .it-tag{left:auto;right:-18px}
.image-text .it-body h2{margin-bottom:18px}
.image-text .it-body p{color:var(--gray);font-size:1.05rem;line-height:1.7}
.image-text .it-body p+p{margin-top:14px}
.image-text .it-body .kicker{margin-bottom:14px}
.image-text .it-body .btn-row{margin-top:24px}
@media(max-width:860px){
  .image-text{grid-template-columns:1fr;gap:36px}
  .image-text.flip .it-media{order:0}
  .it-media::after{width:64px;height:64px;bottom:-18px;right:-12px}
  .image-text.flip .it-media::after{left:-12px}
}

/* ----------------------------------------------------------------
   SHORT-VERSION upgrade for the four service detail pages.
   Adds a subtle thematic visual band at the top of the existing
   .short-version card. Per-page accent via .short-version[data-illo].
   ---------------------------------------------------------------- */
.short-version{position:relative;overflow:hidden}
.short-version::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 100%);
}
.short-version .sv-illo{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:14px 16px;margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.short-version .sv-illo .sv-art{flex:none;width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--ink-soft) 0%,#222226 100%);display:grid;place-items:center;border:1px solid rgba(239,188,94,.25);position:relative;overflow:hidden}
.short-version .sv-illo .sv-art .mi-icon{color:var(--gold);width:30px;height:30px;position:relative;z-index:2}
.short-version .sv-illo .sv-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(239,188,94,.22) 0%,transparent 60%)}
.short-version .sv-illo .sv-text{font-family:var(--display);color:#fff;font-size:.82rem;line-height:1.4}
.short-version .sv-illo .sv-text strong{color:var(--gold);font-weight:600;display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}

/* ============================================================
   POST-END FOOTER (single.php)
   Rich navigation + share + brand byline block that sits between
   the article body and the dark CTA band. Up to four optional
   discovery sections (related-in-category, just-in, browse-topics,
   share) — each renders only when it has data — followed by the
   brand byline. All colors are theme tokens so future palette
   changes flow through here too.
   ============================================================ */
.post-end{padding:60px 0 64px;border-top:1px solid var(--line)}
.post-end .wrap{max-width:980px}

.pe-section{margin-bottom:48px}
.pe-section:last-child{margin-bottom:0}

.pe-eyebrow{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray);margin:0 0 10px;
}

.pe-heading{
  font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;font-weight:700;color:var(--ink);
  margin:0 0 22px;display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.pe-heading > span{flex:1;min-width:0}
.pe-heading-link{
  color:var(--gold-deep);text-decoration:none;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
.pe-heading-link:hover{text-decoration:underline}

/* Related / Just In: 3-card grid */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.related-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,18,14,.08);
  border-color:var(--gold);
}
.related-card .thumb{
  aspect-ratio:16/10;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
}
.related-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.related-card .thumb-placeholder{
  background:linear-gradient(135deg,var(--paper) 0%,var(--gold-soft) 100%);
}
.related-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.related-card .meta{font-size:.78rem;color:var(--gray);letter-spacing:.02em}
.related-card h4{
  font-size:1rem;font-weight:700;line-height:1.3;color:var(--ink);margin:0;
}

/* Topic chip strip — reused on /insights/, category/tag/etc. archives,
   AND inside the single-post footer's "Or browse another topic" block.
   .bt-chip.is-active marks the chip matching the current page (the
   archive's category, or "All" on /insights/); never set on single
   posts (post is not the same as being on the category's archive). */
.bt-chips{display:flex;flex-wrap:wrap;gap:8px}
.bt-chip{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border-radius:999px;border:1px solid var(--line);background:#fff;
  font-family:var(--display);font-size:.88rem;font-weight:500;color:var(--ink);
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bt-chip:hover{background:var(--gold-soft);border-color:var(--gold)}
.bt-chip .ct{font-size:.78rem;color:var(--gray);font-weight:500}
.bt-chip:hover .ct{color:var(--ink)}
.bt-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.bt-chip.is-active .ct{color:#bbb}

/* Share row */
.share-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share-btn{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--ink);
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.share-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.share-btn .mi-icon{width:16px;height:16px;flex:none}
.share-btn.is-copied{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* Brand byline block (dark contrast card) */
.brand-byline{
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:30px 34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.brand-orbit{flex:none;display:flex;align-items:center;justify-content:center}
.brand-orbit svg{display:block}
.brand-byline-text{flex:1;min-width:240px}
.brand-byline-text .name{font-weight:700;font-size:1.05rem;margin:0 0 6px;color:#fff}
.brand-byline-text .desc{color:var(--gray-on-dark);font-size:.95rem;line-height:1.55;margin:0}
.brand-byline .cta{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  background:var(--gold);color:var(--ink);border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background .2s ease,box-shadow .3s ease,transform .2s ease;
}
.brand-byline .cta:hover{
  background:var(--gold-deep);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(217,162,62,.42);
}

/* Tablet: collapse the related grid, tighten the brand byline padding,
   stack the pe-heading split. Brand byline stays in a horizontal row
   at this width — there's still enough room for orbit + text + CTA. */
@media(max-width:780px){
  .post-end{padding:48px 0 52px}
  .related-grid{grid-template-columns:1fr;gap:14px}
  .pe-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .brand-byline{padding:24px 22px;gap:18px}
  .brand-byline-text{min-width:0}
  .brand-byline .cta{align-self:flex-start}
}

/* Phone: stack the brand byline vertically — orbit on top, text in the
   middle, CTA full-width at the bottom. The 84px orbit + a real text
   block + a CTA button don't comfortably fit in a single ~320-420px
   wide row, and a full-width CTA reads better as a tappable target. */
@media(max-width:600px){
  .brand-byline{
    flex-direction:column;
    align-items:flex-start;
    padding:26px 22px;
    gap:16px;
  }
  .brand-byline-text{flex:0 0 auto;width:100%}
  .brand-byline .cta{
    align-self:stretch;
    justify-content:center;
    text-align:center;
    padding:14px 24px;
  }
}

/* ============================================================
   BLOG INDEX (index.php) + ARCHIVES (archive.php)
   Layout: page hero → topic chip strip → featured post hero
   (page 1 only, sticky-or-latest) → "More Articles" grid →
   pagination → brand byline. Featured + chip strip are the two
   new components added on top of what was already there.
   ============================================================ */

/* Topic chip strip section wrapper. The bt-* chip styling itself
   lives up with the post-end CSS (shared with single.php footer). */
.blog-topics{padding:8px 0 32px}
.bt-label{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray);margin:0 0 12px;
}

/* Featured post hero — large 2-col card pinned at the top of page 1.
   The first post in the main query (latest, or any sticky post that
   overrides) is rendered through this layout; the rest follow in the
   standard grid below. */
.blog-featured{padding:0 0 44px}
.bf-eyebrow{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px;
}
.bf-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.bf-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(20,18,14,.08);
  border-color:var(--gold);
}
.bf-image{
  aspect-ratio:5/4;overflow:hidden;
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
}
.bf-image img{width:100%;height:100%;object-fit:cover;display:block}
.bf-image-placeholder{
  background:linear-gradient(135deg,var(--gold-soft) 0%,#E8D8AC 50%,var(--gold-deep) 110%);
}
.bf-body{padding:36px 36px 36px 0}
.bf-meta{font-size:.85rem;color:var(--gray);margin:0 0 12px;letter-spacing:.02em}
.bf-meta strong{color:var(--gold-deep);font-weight:600}
.bf-title{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.18;font-weight:700;margin:0 0 14px;text-wrap:balance}
.bf-excerpt{font-size:1.02rem;color:var(--gray);line-height:1.6;margin:0 0 20px;max-width:34em}
.bf-read{font-size:.92rem;font-weight:700;color:var(--gold-deep);display:inline-flex;align-items:center;gap:6px}
.bf-card:hover .bf-read{color:var(--ink)}

/* "More Articles" grid wrapper — same pattern as before, just
   labeled now that the featured sits above it on page 1. */
.blog-grid{padding:0 0 56px}

/* Featured-card mobile: image stacks above content, padding evens out. */
@media(max-width:860px){
  .bf-card{grid-template-columns:1fr;gap:0}
  .bf-body{padding:28px 28px}
}

/* When the hero composition column is the secondary on a 2-col grid, give
   it some bottom padding so floating tiles don't visually overlap the
   following section. */
@media(min-width:861px){
  .hero .hero-illo{margin-right:-10px}
}
@media(max-width:860px){
  .hero-illo{min-height:auto;margin-top:30px}
  .illo-about .illo-main,.illo-draft .illo-main,.illo-contact .illo-main,.illo-pricing-wrap,.illo-services-wrap{transform:none!important;width:auto!important;margin:0!important}
  .illo-about .illo-buzz,.illo-contact .illo-reply,.illo-draft .illo-serp,.illo-draft .draft-pill{position:static;width:auto;transform:none;margin-top:16px}
  .illo-pricing-wrap{height:auto;min-height:0}
  .illo-pricing .tier-mini,
  .illo-pricing .tier-mini.t1,
  .illo-pricing .tier-mini.t2,
  .illo-pricing .tier-mini.t3{
    position:relative;top:auto;left:auto;right:auto;
    width:auto;transform:none;margin-bottom:14px;
  }
  .illo-pricing .tier-mini.t2::before{display:none}
}