/* The case study block. One stylesheet, because the block drops on any page and must look the
   same on all of them (client 2026-09-25, 0:55:00, "these go on all the pages").
   Tokens come from bhp-csp.css; the fallbacks keep it honest if it loads alone. */

.bhp-cstud{--cs-ink:#F7F2E7;--cs-mute:rgba(247,242,231,.72);--cs-line:rgba(247,242,231,.14);
  --cs-field:rgba(247,242,231,.05);--cs-gold:var(--gold,#FFB000)}
.bhp-cstud--light{--cs-ink:#171D3A;--cs-mute:#374763;--cs-line:rgba(23,29,58,.14);
  --cs-field:rgba(23,29,58,.03)}

.bhp-cstud-h{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.06;
  font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;color:var(--cs-ink);margin:0 0 clamp(20px,2.6vh,28px)}

/* Two across, not four. Client 2026-09-28: "These are all long form landscape videos."
   Measured: Jacob's file reports 1920x1080 to the browser, and the tile was 293x521, so a 16:9
   film was being cover-cropped into a 9:16 box and most of every frame was thrown away. Four
   landscape tiles in a 1240 row would be 293 wide and 165 tall, which is a thumbnail, not a film,
   so the row goes two across and each player gets 610x343. */
/* One card per client, each carrying its own film and its own figures (client 2026-09-28:
   "They each need their own card with the video and the results"). So the grid is a stack of
   full-width cards, and inside each one the film and the results sit side by side. */
.bhp-cstud-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,24px)}
.bhp-cstud-card.has-res{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:stretch}
.bhp-cstud-film{display:flex;flex-direction:column;min-width:0}
.bhp-cstud-side{display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:clamp(22px,2.2vw,30px);border-left:1px solid var(--cs-line);min-width:0}
.bhp-cstud-card:not(.has-res){display:flex;flex-direction:column;max-width:760px}
.bhp-cstud-side .bhp-cstud-rk{margin-bottom:16px}
.bhp-cstud-side .bhp-cstud-rrows{grid-template-columns:auto 1fr;gap:18px;column-gap:14px}
.bhp-cstud-side .bhp-cstud-row{display:grid;grid-template-columns:subgrid;grid-column:span 2;
  align-items:baseline}
.bhp-cstud-side .bhp-cstud-row b{grid-row:span 2;font-size:clamp(30px,2.8vw,40px)}
.bhp-cstud-side .bhp-cstud-rl{margin-top:0;font-size:15px}
.bhp-cstud-side .bhp-cstud-row small{font-size:13px}
@media (max-width:860px){
  .bhp-cstud-card.has-res{grid-template-columns:1fr}
  .bhp-cstud-side{border-left:0;border-top:1px solid var(--cs-line)}
}
.bhp-cstud-card{margin:0;border:1px solid var(--cs-line);border-radius:14px;overflow:hidden;
  background:var(--cs-field);display:flex;flex-direction:column}
.bhp-cstud-v,.bhp-cstud-yt img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:#0B1220;border:0}
.bhp-cstud-card.has-res .bhp-cstud-v,
.bhp-cstud-card.has-res .bhp-cstud-yt{border-radius:13px 0 0 0}
@media (max-width:860px){
  .bhp-cstud-card.has-res .bhp-cstud-v,
  .bhp-cstud-card.has-res .bhp-cstud-yt{border-radius:13px 13px 0 0}
}
/* Back to filling the tile, which is how it was built and how the other three read.
   Client 2026-09-28: "this video was different when we built the page ... revert this video to be
   as it was, these are not the correct ones as it was." The letterboxed version was mine: it
   centred the real 16:9 frame inside the portrait card, so this one tile sat in black bars while
   its three neighbours ran edge to edge. Centring was itself a correction for a crop that had cut
   the speaker's face, and the crop point is the right lever for that, not the letterbox.
   Chris stands right of centre in YouTube's still, so the crop holds at 70% across. */
.bhp-cstud-yt{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0B1220}
/* YouTube has no HD still for this upload: maxresdefault and hq720 both 404, so the largest real
   one is sddefault at 640x480, which is 4:3 with the 16:9 film letterboxed INSIDE it. Now that
   the tile is 16:9 too, the bars are 12.5% of the source height at each end and the picture is
   scaled about its centre by 1/0.75 to push them past the edges. */
.bhp-cstud-yt img{object-position:50% 50%;transform:scale(1.3334);transform-origin:50% 50%}
.bhp-cstud-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(11,18,32,.55);border:2px solid var(--cs-gold)}
.bhp-cstud-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--cs-gold)}
.bhp-cstud-cap{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--cs-line)}
.bhp-cstud-cap b{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:16px;color:var(--cs-ink)}
.bhp-cstud-cap span{font:400 13px/1.5 Geist,system-ui,sans-serif;color:var(--cs-mute)}

.bhp-cstud-res{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(18px,2.2vh,26px)}
.bhp-cstud-rcard{border:1px solid var(--cs-line);border-radius:14px;background:var(--cs-field);
  padding:clamp(18px,2vw,24px)}
.bhp-cstud-rk{display:block;font:500 11px/1.4 Geist,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cs-gold);margin-bottom:14px}
.bhp-cstud-rrows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.bhp-cstud-row b{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1;
  font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;color:var(--cs-gold)}
.bhp-cstud-rl{display:block;font:500 13px/1.4 Geist,system-ui,sans-serif;color:var(--cs-ink);margin-top:7px}
.bhp-cstud-row small{display:block;font:400 12px/1.45 Geist,system-ui,sans-serif;color:var(--cs-mute);margin-top:3px}

@media (max-width:700px){
  .bhp-cstud-grid{grid-template-columns:1fr}
  .bhp-cstud-res{grid-template-columns:1fr}
  /* Client 2026-09-28: "increase size and make it full width too, and make it properly fill the
     cards in mobile."
     Two faults, measured at 390px. The figure is clamp(24px,2.2vw,32px), and 2.2vw is 8.6px on a
     phone, so every number sat on the 24px floor while the desktop got 32. And each row was its
     own two-column grid sized by its own figure, so "+162%", "1,000+" and "78" produced three
     different first columns and the labels beside them started at three different places.
     One subgrid for the card fixes the alignment: the rows share the card's two tracks, so every
     label begins on the same line however wide its number is. */
  .bhp-cstud-rrows{grid-template-columns:auto 1fr;gap:16px;column-gap:14px}
  .bhp-cstud-row{display:grid;grid-template-columns:subgrid;grid-column:span 2;
    align-items:baseline}
  .bhp-cstud-row b{grid-row:span 2;font-size:29px}
  .bhp-cstud-rl{font-size:14px;margin-top:0}
  .bhp-cstud-row small{font-size:12.5px}
  .bhp-cstud-rcard{padding:20px}
}

/* ================= one client, in full =================================================
   Built to the layout the client drew on 2026-09-28: the film with its own overlay and a gold
   play button, the quote on a cream card beneath it, and on the right the three figures ACROSS
   with an icon each and hairlines between, the Search Console plate under them, and a gold pill.
   The earlier version stacked the figures and had no icons, which is what he meant by
   "I need better structure and layout". */

.bhp-ps-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.2vw,52px);align-items:start}

/* ---- left ---- */
.bhp-ps-film{min-width:0;display:flex;flex-direction:column;gap:18px}
.bhp-ps-film .bhp-cstud-yt{position:relative;display:block;aspect-ratio:16/9;width:100%;
  border-radius:16px;overflow:hidden;border:1px solid var(--cs-line);
  box-shadow:0 30px 70px rgba(5,10,22,.36)}
.bhp-ps-film iframe.bhp-cstud-v{aspect-ratio:16/9;width:100%;border-radius:16px;display:block;
  border:1px solid var(--cs-line)}
/* No zoom. That 1.3334 existed to push YouTube's baked-in letterbox out of a 9:16 tile. The tile
   is 16:9 now, and cover already crops a 4:3 still to the middle 75% vertically, which is exactly
   the bars. Leaving the scale on cropped the speaker and the title off the frame
   (client 2026-09-28: "the thumbnail img are getting cut"). */
.bhp-ps-film .bhp-cstud-yt img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 50%}
/* the film's own caption, over the foot of the frame */
/* these films carry burned-in titles of their own, so the overlay needs a scrim under it or the
   two sets of white type sit on top of each other */
.bhp-ps-film .bhp-cstud-yt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,rgba(11,18,32,0) 0%,rgba(11,18,32,.82) 100%);pointer-events:none}
.bhp-ps-vlabel{position:absolute;z-index:2;left:18px;bottom:16px;display:flex;flex-direction:column;
  gap:2px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.bhp-ps-dur{z-index:2}
.bhp-ps-vlabel b{font:600 17px/1.25 Geist,system-ui,sans-serif;color:#fff}
.bhp-ps-vlabel span{font:400 14px/1.3 Geist,system-ui,sans-serif;color:rgba(255,255,255,.85)}
.bhp-ps-dur{position:absolute;right:16px;bottom:16px;font:500 13px/1 Geist,system-ui,sans-serif;
  color:#fff;background:rgba(11,18,32,.72);border-radius:6px;padding:6px 9px}
.bhp-ps-film .bhp-cstud-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;
  border-radius:50%;background:var(--cs-gold);border:0;
  box-shadow:0 14px 34px rgba(11,18,32,.42);transition:transform .2s ease}
.bhp-ps-film .bhp-cstud-yt:hover .bhp-cstud-play{transform:scale(1.06)}
.bhp-ps-film .bhp-cstud-play::after{content:"";position:absolute;left:56%;top:50%;
  transform:translate(-50%,-50%);border-left:24px solid #0B1220;
  border-top:15px solid transparent;border-bottom:15px solid transparent}

/* The card is cream even inside the dark block, so it opts out of the dark tokens for its whole
   subtree. Inheriting --cs-ink there printed cream text on a cream card, twice. */
.bhp-ps-quote{--cs-ink:#171D3A;--cs-mute:#5B6472;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,1.6vw,22px);
  margin:0;padding:clamp(24px,2.4vw,30px);
  background:#FBF8F1;border:1px solid rgba(23,29,58,.1);border-radius:16px;
  box-shadow:0 22px 50px rgba(5,10,22,.2)}
.bhp-ps-qm{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,176,0,.22);color:#B9791A;font:600 26px/1 Fraunces,Georgia,serif;
  padding-top:10px;flex:0 0 auto}
.bhp-ps-qbody{min-width:0}
.bhp-cstud .bhp-ps-quote p{margin:0;font-family:Fraunces,Georgia,serif;font-style:italic;
  font-weight:500;font-size:clamp(17px,1.5vw,20px);line-height:1.46;color:#171D3A}
/* the signature: a 34px gold rule, then the name, then the role beneath. It was a wrapping flex
   row, and when the name wrapped the rule stretched the width of the card. */
/* The gold rule is itself a <span>, so a `.bhp-ps-sig span` rule was forcing IT into column two
   and the name was left in a 34px track reading "Courtney / & / Ryan". The role is selected by
   :last-child instead, and the rule sits on its own row above both. */
.bhp-ps-sig{display:block;margin-top:20px}
.bhp-ps-rule{display:block;width:34px;height:2px;background:var(--cs-gold);margin-bottom:10px}
.bhp-cstud .bhp-ps-sig b{display:block;font:600 16.5px/1.35 Geist,system-ui,sans-serif;
  color:#171D3A}
.bhp-cstud .bhp-ps-sig span:last-child{display:block;margin-top:2px;
  font:400 14.5px/1.4 Geist,system-ui,sans-serif;color:#5B6472}

/* ---- right ---- */
.bhp-ps-res{min-width:0}
.bhp-ps-name{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.024em;
  font-size:clamp(30px,3.4vw,48px);line-height:1.04;color:var(--cs-ink);margin:12px 0 0}
.bhp-ps-sub{margin:12px 0 0;font-size:clamp(15.5px,1.3vw,17px);line-height:1.55;
  color:var(--cs-mute)}

/* The three figures share row tracks through subgrid, so the labels start on one line and the
   sub-lines finish on one line however many lines a label takes. Before this, "Google organic
   clicks" wrapped to two lines and "Inbound growth" did not, so the three sub-lines sat at three
   different heights and the row read as unaligned (client 2026-09-28: "make it more structured
   and aligned"). */
.bhp-ps-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;margin:clamp(24px,2.6vw,32px) 0 0;padding:0}
.bhp-ps-stats li{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:8px;
  padding:0 clamp(14px,1.4vw,20px) 6px}
.bhp-ps-stats li+li{border-left:1px solid var(--cs-line)}
.bhp-ps-stats li:first-child{padding-left:0}
.bhp-ps-fig{display:flex;align-items:center;gap:12px;min-width:0}
.bhp-ps-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,176,0,.12);flex:0 0 auto}
.bhp-ps-ico svg{width:19px;height:19px;fill:none;stroke:var(--cs-gold);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.bhp-ps-stats b{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(26px,2.5vw,34px);line-height:1;letter-spacing:-.03em;color:var(--cs-gold);
  font-variant-numeric:tabular-nums}
/* text-wrap:balance so a two-line label breaks evenly instead of leaving one word alone, and a
   slightly smaller size so more of them hold one line. Subgrid already levels the rows; this is
   about the ragged wrap the client pointed at. */
.bhp-ps-sl{align-self:start;font:500 14.5px/1.4 Geist,system-ui,sans-serif;color:var(--cs-ink);
  text-wrap:balance}
.bhp-ps-stats small{align-self:start;font:400 13px/1.45 Geist,system-ui,sans-serif;
  color:var(--cs-mute)}

/* Elementor ships `.elementor .elementor-widget:not(...):not(...) figure{margin:0}`, four classes
   and an element, which outranks any single-class margin here. So the gap is padding on the
   figure, which that rule does not touch, rather than a specificity war. */
.bhp-ps-proof{margin:0;padding-top:clamp(34px,3.6vw,46px);background:transparent;border:0;
  box-shadow:none}
.bhp-ps-proof img{display:block;width:100%;height:auto;background:#fff;border-radius:14px;
  border:1px solid var(--cs-line);box-shadow:0 22px 50px rgba(5,10,22,.22)}
.bhp-ps-src{margin:16px 0 0;font-style:italic;font-size:13.5px;line-height:1.55;
  color:var(--cs-mute)}

/* two CTAs now on the Radix stories, so they share a wrapping row */
/* Side by side (client 2026-09-28: "make button side by side"). They cannot share one line at a
   readable size: Adam's second label, "See The Whole Radix Facility Virtual Walkthrough", is 47
   characters and the two together need about 670px in a 640px column. So they are equal halves
   and the longer one wraps inside its own button rather than dropping below the other. */
.bhp-ps-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.bhp-ps-ctas a.bhp-ps-link{justify-content:center;text-align:center;white-space:normal;
  line-height:1.3}
@media (max-width:620px){
  .bhp-ps-ctas{grid-template-columns:1fr}
}
a.bhp-ps-link{display:inline-flex;align-items:center;gap:10px;
  font:600 15px/1 Geist,system-ui,sans-serif;color:#0B1220;background:var(--cs-gold);
  padding:15px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--cs-gold);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
a.bhp-ps-link::after{content:"\2192";font-size:17px;line-height:1}
a.bhp-ps-link:hover{background:#E29C00;border-color:#E29C00;transform:translateX(2px)}
a.bhp-ps-link:focus-visible{outline:2px solid var(--cs-gold);outline-offset:3px}
a.bhp-ps-link.ghost{background:transparent;color:var(--cs-ink);
  border-color:rgba(247,242,231,.34)}
a.bhp-ps-link.ghost:hover{background:rgba(247,242,231,.08);border-color:var(--cs-gold);
  color:var(--cs-gold)}
.bhp-cstud--light a.bhp-ps-link.ghost{border-color:rgba(23,29,58,.24)}

@media (max-width:1000px){
  .bhp-ps-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bhp-ps-stats{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .bhp-ps-stats li{grid-template-rows:none;grid-row:auto;padding:16px 0;border-left:0}
  .bhp-ps-stats li+li{border-top:1px solid var(--cs-line)}
  .bhp-ps-film .bhp-cstud-play{width:60px;height:60px}
  .bhp-ps-film .bhp-cstud-play::after{border-left-width:19px;border-top-width:12px;
    border-bottom-width:12px}
  .bhp-ps-quote{grid-template-columns:1fr}
  .bhp-ps-sig span{margin-left:0}
}