/* The Paid Ads Engine: section 04 on /work-with-us and the /paid-ads-engine page.
   Reuses site.css + lead-engine.css building blocks; this file only adds the list, the note,
   the ad mockups and a few page-specific spacings. */

.pa-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pa-list li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.02vw, 18px); }
.pa-list li::before { content: "\2014"; opacity: .55; }

.pa-note { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.4; opacity: .9; }

/* ---------- ad mockups (Facebook / Instagram feed cards + a Google search ad) ---------- */
.pa-ads { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1.24; justify-self: center; margin: 0; }
.pa-card { position: absolute; width: 52%; background: #fff; color: #1c1e21; box-shadow: 0 24px 60px rgba(0, 0, 0, .38); font-family: var(--sans); line-height: 1.3; }
.pa-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 6px; }
.pa-head img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pa-head b { display: block; font-size: 12px; }
.pa-head small { display: block; font-size: 10.5px; color: #65676b; }
.pa-copy { padding: 0 10px 8px; font-size: 11px; line-height: 1.38; color: #1c1e21; }
.pa-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.pa-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pa-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f0f2f5; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.pa-foot small { display: block; font-size: 9.5px; font-weight: 400; color: #65676b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.pa-foot i { flex-shrink: 0; font-style: normal; padding: 6px 9px; background: #e4e6eb; border-radius: 4px; font-size: 10.5px; }

/* overlays printed on the ad images */
.pa-over { position: absolute; color: #fff; font-family: var(--serif); line-height: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.pa-over small { display: block; font-family: var(--sans); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; }
.pa-oh { left: 0; top: 10%; padding: 8px 12px 9px; background: var(--espresso); font-size: 22px; text-shadow: none; text-transform: uppercase; letter-spacing: .02em; }
.pa-oh small { margin-top: 5px; font-size: 10px; letter-spacing: .12em; opacity: .9; }
.pa-spec { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 10px; background: rgba(42, 33, 27, .82); color: var(--ivory); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.pa-hood { left: 10px; top: 10px; font-size: 26px; }
.pa-hood small { margin-bottom: 4px; }
.pa-inset { position: absolute; right: 8px; bottom: 8px; width: 34%; background: #fff; padding: 3px 3px 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.pa-inset img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pa-inset small { display: block; margin-top: 4px; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

.pa-back  { left: -3%; top: 8%; transform: rotate(-7deg); z-index: 1; }
.pa-side  { right: -3%; top: 6%; transform: rotate(6deg);  z-index: 2; }
.pa-front { left: 24%; top: 0;  z-index: 3; }

.pa-search { position: absolute; left: 8%; right: 8%; bottom: 0; z-index: 4; padding: 14px 16px; background: #fff; color: #202124; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); border-radius: 10px; font-family: Arial, var(--sans); line-height: 1.35; }
.pa-search small { display: block; font-size: 11px; font-weight: 700; color: #202124; }
.pa-search b { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; color: #1a0dab; }
.pa-search span { display: block; margin-top: 3px; font-size: 12px; color: #4d5156; }

.pa-ads figcaption { position: absolute; left: 0; right: 0; bottom: -38px; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

@media (max-width: 760px) {
  .pa-ads { width: min(100%, 420px); aspect-ratio: 1 / 1.42; margin-bottom: 40px; }
  .pa-card { width: 60%; }
  .pa-back { left: -2%; }
  .pa-side { right: -2%; }
  .pa-front { left: 20%; }
  .pa-head { padding: 7px 8px 5px; }
  .pa-copy { padding: 0 8px 6px; font-size: 10px; }
  .pa-foot { padding: 7px 8px; font-size: 10.5px; }
  .pa-foot > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-oh { font-size: 18px; padding: 6px 10px 7px; }
  .pa-hood { font-size: 21px; }
  .pa-spec { font-size: 9.5px; padding: 6px 8px; }
  .pa-search { padding: 11px 13px; }
  .pa-search b { font-size: 13.5px; }
}

/* ---------- /paid-ads-engine page ---------- */
.pa-hero .pa-ads { justify-self: end; }
.pa-hard { row-gap: clamp(36px, 4vw, 60px); }
.pa-promise { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); background: var(--espresso); color: var(--ivory); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.pa-promise p { font-family: var(--serif); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; }
.pa-promise span { font-size: 16px; opacity: .8; max-width: 34em; }
.pa-need { align-items: start; }
.pa-areas li { grid-template-columns: 56px 1fr; }
.pa-timeline { margin-bottom: clamp(48px, 6vw, 84px); }
.pa-team .paths { margin-top: clamp(36px, 4vw, 56px); }
.pa-team-quote { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.18; max-width: 20em; text-wrap: balance; }
.pa-next { list-style: none; margin-top: 28px; padding: 0; border-top: 1px solid var(--line); }
.pa-next li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.pa-next b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 2px; }
@media (max-width: 900px) { .pa-hard { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pa-hero .pa-ads { justify-self: center; margin-top: 12px; }
  .pa-areas li { grid-template-columns: 44px 1fr; }
}
.way.pa, .pa-hero { overflow-x: clip; }
.pa-math { margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.35; max-width: 34em; }
.pa-avg { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: auto 1fr; gap: 6px clamp(24px, 3vw, 48px); align-items: center; padding: clamp(22px, 3vw, 34px) 0; border-top: 1.5px solid currentColor; border-bottom: 1px solid var(--line); }
.pa-avg-n { grid-row: span 2; font-family: var(--serif); font-size: clamp(56px, 6vw, 92px); line-height: .9; }
.pa-avg p { font-size: clamp(17px, 1.2vw, 20px); line-height: 1.5; max-width: 52em; }
.pa-avg .src { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.pa-avg + .pa-promise { margin-top: 24px; }
@media (max-width: 760px) { .pa-avg { grid-template-columns: 1fr; } .pa-avg-n { grid-row: auto; } }
.pa-stats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-stats2 .t { max-width: 30em; }
#why .pa-math { max-width: none; }
.pa-avg .src { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13.5px; line-height: 1.5; opacity: .7; max-width: 64em; }
@media (max-width: 760px) { .pa-stats2 { grid-template-columns: 1fr; } }