/* GENERATED by build/smm-el/make_css.py - do not edit on the server. Source: build/smm/smm.css */
/* Social Media Marketing: page level adjustments only. Every component here already exists in the
   system, plus one new block: the engine grid of four sibling links. */

/* ---------- 01 hero ---------- */
.bhp-smm.chero .paths{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bhp-smm.chero .paths .btn{flex:0 0 auto}
.bhp-smm .cta-core .paths.mid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(22px,3vh,28px)}
.bhp-smm.chero .tag .ln{white-space:normal}

/* ---------- 02 the answer column ---------- */
.bhp-smm .a2 .erow{align-items:stretch}
.bhp-smm .lead-col{display:flex;flex-direction:column;justify-content:flex-start}
.bhp-smm .lead-col p{font-size:20px!important;line-height:1.7;color:var(--navy);max-width:46ch}

/* ---------- the head sits inside the copy column wherever a device stands beside it ---------- */
.bhp-smm .erow.topalign{align-items:stretch;margin-top:0}
.bhp-smm .erow.topalign .ecol .shead{margin-bottom:clamp(14px,1.8vh,18px)}
.bhp-smm .erow.topalign .ecol > p:first-of-type{margin-top:0}
.bhp-smm .a2 .erow.topalign + .closeband{margin-top:clamp(28px,3.4vh,38px)}
.bhp-smm .ecol p.moat{margin-top:auto;padding-top:clamp(14px,2vh,20px)}
.bhp-smm .ecol .subh{color:var(--navy)}

/* ---------- 03 and 07 a film that closes its own section ----------
   The section already carries its H2, so the film's own line is an H3 at the subsection size. */
.bhp-smm .filmwrap{margin-top:clamp(34px,4.4vh,48px)}
.bhp-smm .filmwrap .shead{margin-bottom:clamp(16px,2vh,22px)}
.bhp-smm .filmhead h3{margin:0;font-family:var(--disp);font-weight:600;
  font-size:clamp(21px,1.9vw,27px);line-height:1.22;letter-spacing:-.02em}
.bhp-smm.sec-deep .filmhead h3,.bhp-smm.sec-navy .filmhead h3{color:#fff}
.bhp-smm.sec-white .filmhead h3,.bhp-smm.sec-cream .filmhead h3{color:var(--navy)}
.bhp-smm .filmhead .intro{margin-top:10px;max-width:70ch}

/* ---------- 04 the reach strip sits on navy, so it keeps the dark treatment ---------- */
.bhp-smm .a4 .statrow.four{display:grid;grid-template-columns:repeat(4,1fr)}
.bhp-smm .statrow .lstat .fig{font-size:clamp(26px,2.6vw,38px)}
@media (max-width:900px){.bhp-smm .a4 .statrow.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bhp-smm .a4 .statrow.four{grid-template-columns:1fr}}
/* on a light surface the strip's own dark label and rules must be restated */
.bhp-smm.sec-white .statrow .lstat p,.bhp-smm.sec-cream .statrow .lstat p{color:var(--on-light-2)!important}
.bhp-smm.sec-white .statrow .lstat,.bhp-smm.sec-cream .statrow .lstat{border-color:var(--line-light)}
/* the proof band's closing copy sits on deep navy */
.bhp-smm.sec-deep .secfollow,.bhp-smm.sec-deep .secfollow p{color:var(--on-dark-2)}

/* ---------- 06 the four pillars, two across ---------- */
.bhp-smm .a6 .svcgrid.two{display:grid;grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.bhp-smm .a6 .svcgrid.two{grid-template-columns:1fr}}

/* ---------- 11 the engine grid: four sibling links as a row of doors ---------- */
.bhp-smm .enggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(30px,3.8vh,42px)}
.bhp-smm .engcard{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,2.6vh,28px) clamp(20px,2vw,24px);border-radius:14px;text-decoration:none;
  background:rgba(247,242,231,.05);border:1px solid rgba(247,242,231,.14);
  transition:transform .22s ease,border-color .22s ease,background .22s ease}
.bhp-smm .engcard:hover{transform:translateY(-3px);border-color:rgba(255,176,0,.55);
  background:rgba(247,242,231,.09)}
.bhp-smm .engcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bhp-smm .engcard .sysn{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold)}
.bhp-smm .engcard .engt{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.35vw,19px);
  line-height:1.3;letter-spacing:-.02em;color:#fff}
.bhp-smm .engcard .engarrow{margin-top:auto;width:22px;height:10px;background:var(--gold);
  clip-path:polygon(0 45%,72% 45%,72% 0,100% 50%,72% 100%,72% 55%,0 55%);opacity:.85;
  transition:transform .22s ease}
.bhp-smm .engcard:hover .engarrow{transform:translateX(5px)}
@media (max-width:1000px){.bhp-smm .enggrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bhp-smm .enggrid{grid-template-columns:1fr}}

/* ---------- 13 the team reads as people ---------- */
.bhp-smm .pcard{display:flex;flex-direction:column;padding:clamp(24px,2.8vh,30px) clamp(22px,2.2vw,28px);
  border-radius:14px;background:var(--field-cream);border:1px solid var(--line-light);position:relative;
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-smm .pcard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(23,29,58,.1);
  border-color:rgba(255,176,0,.5)}
.bhp-smm .pcard h3{margin:10px 0 0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.6vw,22px);
  line-height:1.24;letter-spacing:-.02em;color:var(--navy)}
.bhp-smm .pcard p{margin:10px 0 0;font-size:15px;line-height:1.75;color:var(--on-light-2)}

/* ---------- 15 the note under the final CTA ---------- */
.bhp-smm .ctanote{margin:clamp(16px,2.2vh,22px) 0 0;font-family:var(--body);font-size:14px;
  letter-spacing:.04em;color:rgba(247,242,231,.56);text-align:center}

/* a row that follows another block keeps its own spacing: the shared rule zeroes it */
.bhp-smm .statrow + .erow,.bhp-smm .svcgrid + .secfollow{margin-top:clamp(28px,3.4vh,38px)}


/* ---------- Elementor parity for this page ---------- */
/* The film rules moved to bhp-csp.css on 2026-09-22. Every page kept its own copy with its
   own numbers, which is how one site ended up with a different video block on every page.
   The shared sheet owns them now; a copy here would only override it again. */


/* ---------- 2026-09-21, the client's page walkthrough (Loom 3d1eb3d3) ---------- */
/* 2:55 "I don't like the full screen videos at all, so use this collage, put the TEDx next to it" */
.bhp-smm .collagecol,.bhp-smm .filmcol,.bhp-smm .proofcol,.bhp-smm .infogcol{min-width:0}
/* The client's infographics. They carry their own field and their own border, so the column
   adds nothing but a place to sit, right aligned so the image hugs the outer edge the way
   every other right hand device on the page does. */
.bhp-smm .infogcol{align-items:flex-end}
/* The lightbox wraps the image in an <a>, which is inline, so a width of 100% on the img resolved
   against a shrink-to-fit box and the landscape infographic rendered 2px wide on tablet and phone.
   The anchor has to be a block before the percentage means anything. */
.bhp-smm .infog a{display:block;width:100%}
.bhp-smm .infog img{width:100%;height:auto;display:block;border-radius:14px}
@media (max-width:900px){ .bhp-smm .infogcol{align-items:stretch}
  .bhp-smm .infog .elementor-image,.bhp-smm .infog a,.bhp-smm .infog img{width:100%!important} }
.bhp-smm .collage img{width:100%;height:auto;display:block;border:1px solid rgba(247,242,231,.14);
  border-radius:14px}
/* 5:08 "have some of the screenshots of memes next to this video" */
.bhp-smm .proofshot img{width:100%;height:auto;display:block;border:1px solid var(--line-light);
  border-radius:12px}
/* 0:57 "this needs to get lined up here, not with the H2, but with this text" */
.bhp-smm .erow.topalign.e-con{align-items:flex-start!important}
.bhp-smm :is(.a7,.a12) > .shead{max-width:60%}
@media (max-width:900px){ .bhp-smm :is(.a7,.a12) > .shead{max-width:none} }
/* a service card whose page does not exist yet must not read as a link */
.bhp-smm .engcard-pending{opacity:.72}
.bhp-smm .engt.pending .elementor-heading-title{font-style:italic}
.bhp-smm .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-smm .paths{display:flex}
.bhp-smm .shead.e-con{margin-block-end:20px!important}
/* the head-to-first-block gap is the head's own margin; a row that follows another block keeps its space */
.bhp-smm .shead + .erow.e-con,.bhp-smm .shead + .statrow.e-con,.bhp-smm .shead + .prail.e-con,
.bhp-smm .shead + .flow.e-con,.bhp-smm .shead + .svcgrid.e-con,
.bhp-smm .shead + .svcgrid.three.e-con,.bhp-smm .shead + .statrow.e-con,
.bhp-smm .shead + .isel.e-con,.bhp-smm .shead + .tgrid.e-con,
.bhp-smm .shead + .elementor-widget-bhp_index_selector{margin-block-start:0!important}
.bhp-smm .erow.e-con{margin-block-start:clamp(28px,3.4vh,38px)!important}
/* the author headshot matches the other pages exactly: 56 by 70 on a 12px corner */
.bhp-smm .author .abox img{width:56px;height:70px;border-radius:12px;object-fit:cover}
.bhp-smm .author .abox .elementor-widget-image{width:auto;flex:0 0 auto}
/* the shared text-editor rule outranks Elementor's own per widget CSS for these two, so both are
   stated here: the closing link line and the note under the final CTA */
/* not .ecol .moat: the callout moved under the panel on 2026-09-21 and took its type with it,
   so the rule that fixed its line height stopped reaching it. */
.bhp-smm .moat p,.bhp-smm .moat p a{font-size:15px;line-height:24.3px}
.bhp-smm .ctanote p{color:rgba(247,242,231,.56)!important;font-size:14px;line-height:1.62}
/* 04 and 05 the figure strips */
.bhp-smm .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-smm .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-smm .sec-white .statrow .lstat .elementor-widget-text-editor p,
.bhp-smm .sec-cream .statrow .lstat .elementor-widget-text-editor p{color:var(--on-light-2)!important}
.bhp-smm .sec-white .statrow .lstat.e-con,.bhp-smm .sec-cream .statrow .lstat.e-con{border-color:var(--line-light)}
/* 13 the three card team grid */
.bhp-smm .svcgrid.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
/* 06 the four pillars, two across */
.bhp-smm .svcgrid.two.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
/* 11 the engine grid of four sibling links.
   Scoped to `.enggrid-4up`, the VARIANT, not to a page or a section number. Every BHP section
   carries the whole page class list, so `.bhp-smm .engcard` reached the CRO page's three-across
   grid and put the arrow above the label with a dead band underneath (client 2026-09-23, image
   130). Scoping it `.bhp-smm.a11` instead then reached the CONTENT page, whose service section is
   also numbered a11, and did the same thing there (image 137). A page class collides across pages
   and a section number collides across pages; only the component's own variant class does not.

   Everything below is for a four-across grid of 295px cards, where the longest of the client's
   labels needs 299px on its own and there is no room for an inline arrow. Three-across pages use
   the shared card and put the arrow on the label's line. */
/* Image 125: "this all should look same and aligned properly with arrows and should not stacked,
   text should all be proper on line."  Then 2026-09-27: "these are not coming proper, arrows are
   coming below, make them come align with text or make them go away, this is not proper."

   The first fix took the arrow out of the text flow and anchored it to the bottom-left of the
   card, which put all four arrows on one line across the row but left each one under its own
   label. That is the stacking he is objecting to now. The arrow comes back onto the label's line.

   Both of his asks fit only if the measure is wide enough for the longest label PLUS the arrow.
   Measured at 1440: a 301px card with 18px of padding gave 265px of measure, and
   "Conversion Optimization Services" at 16px needs 252 on its own, so the 19px arrow and its
   9px gap put it 15px over and it wrapped. So the card gives back the 60px band it was reserving
   under the arrow, the side padding comes in to 15px, the type tops out at 15px instead of 16,
   and the arrow is 16px with a 7px gap here rather than 19 and 9. Measure 271, longest label
   236 + arrow 23 = 259. 12px to spare, measured at seven widths, not estimated. */
.enggrid-4up.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  column-gap:12px!important}
.enggrid-4up .engcard.e-con{height:100%;position:relative;
  padding:26px 15px!important}
.enggrid-4up .engcard .engt .elementor-heading-title{font-size:clamp(13px,1.08vw,15px)!important}
/* the shared inline arrow, one size down so the longest label keeps its single line */
.enggrid-4up .engcard .engt a::after{width:16px;height:8px;margin-left:7px}
.bhp-smm .engcard .engt a{color:#fff;text-decoration:none;border:0}
.bhp-smm .engcard:hover .engt a{color:#fff}
.bhp-smm .engcard .engarrow.e-con{width:22px;min-height:10px;height:10px;background:var(--gold);
  clip-path:polygon(0 45%,72% 45%,72% 0,100% 50%,72% 100%,72% 55%,0 55%);opacity:.85;
  transition:transform .22s ease}
.bhp-smm .engcard:hover .engarrow.e-con{transform:translateX(5px)}
/* Client 2026-09-23, image 127: "reduce the space on top of that video a little, move it up, so
   that rest of bottom img will align with other one too." The 18px comes from
   `.bhp-csp .filmcol .elementor-widget-video:not(:first-child)` in the shared sheet, which outranks
   the widget's own margin, so it has to be beaten here rather than set in the composer. Scoped to
   this section: the same 18px is right on the TEDx film in section 3, where the halves already line
   up. This 9px is the last 9px between the two column bottoms.
   `.bhp-smm.a7`, no space: the page class and the section class sit on the SAME element, so
   `.bhp-smm .a7` asks for a descendant that does not exist. Second time today. */
.bhp-smm.a7 .filmcol .elementor-widget-video:not(:first-child){margin-top:9px}
/* the film head inside a section that already carries an H2 */
.bhp-smm .filmhead .rule.e-con{width:34px;min-height:2px;height:2px;background:var(--gold)}
/* 02: the row is the section's first block, so it carries no top margin of its own */
.bhp-smm .a2 .erow.e-con{margin-block-start:0!important}
/* the head sits inside the copy column wherever a device stands beside it, so the device's top edge
   lines up with the headline instead of starting below it */
.bhp-smm .erow.topalign.e-con:not(.gaptop){margin-block-start:0!important}
.bhp-smm .erow.topalign .ecol .shead.e-con{margin-block-end:16px!important}
.bhp-smm .svcledger.e-con{display:flex}
.bhp-smm .svcrow.e-con{align-items:start}
.bhp-smm .svcname .elementor-heading-title{color:var(--navy)}
.bhp-smm .svcrow:hover .svcname h3.elementor-heading-title{color:var(--gold-deep)}
.bhp-smm .svctext .elementor-widget-text-editor p{max-width:66ch}
/* 06 the funding band runs three figures */
.bhp-smm .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-smm .a6 .statrow .lstat .fig .elementor-heading-title{font-size:clamp(26px,2.4vw,34px)}
/* 02 the covers panel */
.bhp-smm .verdict.e-con{align-self:stretch;border-radius:14px;overflow:hidden;position:relative;
  padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px);background:var(--field-navy);
  box-shadow:0 24px 60px rgba(23,29,58,.2)}
.bhp-smm .verdict.e-con::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)}
.bhp-smm .verdict .vrow.e-con{position:relative}
.bhp-smm .lead-col .elementor-widget-text-editor p{font-size:20px;line-height:1.7;max-width:46ch}
.bhp-smm .a2 .shead.e-con{margin-block-end:16px!important}
/* 08 the three models */
.bhp-smm .svcgrid.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-smm .svcgrid.two .svc.e-con{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-smm .svcgrid.two .svc.e-con:hover{transform:translateY(-3px);
  box-shadow:0 22px 54px rgba(23,29,58,.12);border-color:rgba(255,176,0,.45)}
.bhp-smm .secfollow p{max-width:92ch}
/* 06 the record */
.bhp-smm .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-smm .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
/* 08 the process rail */
.bhp-smm .prail.e-con{position:relative;padding:0}
.bhp-smm .prow.e-con{position:relative}
.bhp-smm .prow.e-con:not(.last)::before{content:"";position:absolute;left:21px;top:38px;bottom:-6px;
  width:2px;background:linear-gradient(180deg,rgba(255,176,0,.55),rgba(255,176,0,.3))}
.bhp-smm .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px}
.bhp-smm .pnode .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid rgba(255,176,0,.55);
  color:var(--gold-deep);box-shadow:0 0 0 6px var(--cream);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.bhp-smm .pbody.e-con{padding:clamp(16px,2vh,20px) clamp(20px,2vw,26px);border-radius:14px;
  background:var(--field-cream);border:1px solid var(--line-light);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-smm .pbody .elementor-widget-text-editor p{max-width:78ch}
.bhp-smm .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy);transform:scale(1.06)}
.bhp-smm .prow.e-con:hover .pbody.e-con{transform:translateX(4px);box-shadow:0 18px 44px rgba(23,29,58,.1);
  border-color:rgba(255,176,0,.45)}
.bhp-smm .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold);
  color:var(--navy)}
.bhp-smm .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)}
/* 07 the cost band runs three figures */
.bhp-smm .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-smm .a7 .statrow .lstat .fig .elementor-heading-title{font-size:clamp(26px,2.4vw,34px)}
/* 05 and 06 the subheads inside the copy column */
.bhp-smm .sec-white .subh .elementor-heading-title,
.bhp-smm .sec-cream .subh .elementor-heading-title{color:var(--navy)}
/* 11 the four stage flow */
.bhp-smm .flow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-smm .fstage.e-con{position:relative;padding:clamp(24px,3vh,30px) clamp(22px,2.2vw,28px);
  border-radius:14px;background:#fff;border:1px solid var(--line-light);
  box-shadow:0 14px 40px rgba(23,29,58,.06)}
/* the step card's gold edge is a border now, stated once in bhp-fes-el.css, so the old
   pseudo-element bar is gone from every page rather than redrawn on each one */
/* the vertical band label wraps instead of setting the band height */
.bhp-smm .closeband .ck .elementor-heading-title{writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:110px;white-space:normal;line-height:1.35}
.bhp-smm .closeband.e-con{width:auto}
/* 12 the dual author box */
.bhp-smm .author.dual.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  align-items:start!important;max-width:920px;margin-inline:auto}
.bhp-smm .author.dual > .elementor-widget-heading{grid-column:1 / -1;justify-self:center;padding-top:8px}
.bhp-smm .author.dual .abox img{width:56px!important;height:70px;object-fit:cover;object-position:50% 20%;
  border-radius:12px}
/* custom widget buttons never inherit the theme's link colour */
.bhp-smm .econ button{color:#fff}
@media (max-width:1100px){
  .bhp-smm .flow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  .bhp-smm .svcgrid.two.e-con{grid-template-columns:1fr!important}
  .bhp-smm .pnodewrap.e-con{flex:0 0 36px}
  .bhp-smm .pnode .elementor-heading-title{width:36px;height:36px;font-size:16px;
    box-shadow:0 0 0 5px var(--cream)}
  .bhp-smm .prow.e-con:not(.last)::before{left:17px;top:32px}
  .bhp-smm .author.dual.e-con{grid-template-columns:1fr!important}
}
@media (max-width:900px){
  .bhp-smm .statrow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-smm .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-smm .svcgrid.two.e-con{grid-template-columns:1fr!important}
}
@media (max-width:1100px){
  /* Four Fraunces labels across need more than 1024: at 228px a card broke "Drug Rehab SEO" off
     "Services". Two up from 1100 gives each label a single line. */
  .enggrid-4up.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:700px){
  /* four service cards two up on a phone leaves 124px of text per card, which is narrower than the
     labels the client dictated at 7:10. One up. */
  .enggrid-4up.e-con{grid-template-columns:1fr!important}
  .bhp-smm .svcgrid.three.e-con{grid-template-columns:1fr!important}
  .bhp-smm .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-smm .statrow.four.e-con{grid-template-columns:1fr!important}
  .bhp-smm .flow.four.e-con{grid-template-columns:1fr!important}
}