/* Portfolio case-study layout (html/com_content/article/portfolio.php) */
.pf-case {
  --pf-navy: var(--tp-navy, #050038);
  --pf-green: var(--tp-green, #34c759);
  --pf-green-d: #1bc145;
  --pf-text: #161616;
  --pf-muted: #5b6474;
  --pf-faint: #9aa3b2;
  --pf-line: #eceff3;
  --pf-soft: #f5f8fa;
  --pf-r: 18px;
  color: var(--pf-text);
  background: #fff;
}
.pf-case .container { max-width: 1180px; }
.pf-case h1, .pf-case h2, .pf-case h3 { color: var(--pf-navy); font-weight: 700; line-height: 1.16; margin: 0; }
.pf-case h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.pf-case h3 { font-size: 1.05rem; }
.pf-case img { max-width: 100%; height: auto; }
.pf-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--pf-green); margin-bottom: 10px; }

/* buttons */
.pf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-case .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 600; }
.pf-btn-ghost { background: #fff; color: var(--pf-navy); border: 1.5px solid var(--pf-line); }
.pf-btn-ghost:hover { background: var(--pf-soft); color: var(--pf-navy); }

/* hero */
.pf-hero { padding: 64px 0 88px; background: #fff; }
.pf-crumbs { font-size: 14px; color: var(--pf-faint); margin-bottom: 28px; }
.pf-crumbs a { color: var(--pf-muted); text-decoration: none; }
.pf-crumbs span { margin: 0 4px; }
.pf-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.pf-client { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pf-client img { height: auto; width: auto; max-height: 36px; max-width: 170px; } /* wide wordmarks (e.g. Vivi City, 8:1) get narrower, square-ish logos keep 36px */
.pf-client span { font-size: 13px; color: var(--pf-muted); border-left: 1px solid var(--pf-line); padding-left: 14px; }
.pf-case .pf-title { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; }
.pf-lead { font-size: 18px; line-height: 1.7; margin: 24px 0 32px; max-width: 540px; }
.pf-lead p { margin: 0; }
.pf-chips, .pf-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips { margin-bottom: 36px; }
.pf-chip { font-size: 13px; font-weight: 500; color: var(--pf-navy); background: #fff; border: 1px solid var(--pf-line); border-radius: 999px; padding: 6px 14px; display: inline-flex; gap: 8px; align-items: center; }
.pf-chip i { color: var(--pf-muted); }
.pf-hero-img img { display: block; width: 100%; }

/* facts */
.pf-facts { background: var(--pf-navy); color: #fff; }
.pf-facts .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pf-fact { padding: 30px 24px; border-right: 1px solid rgba(255, 255, 255, .1); }
.pf-fact:last-child { border-right: 0; }
.pf-fact small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .55); margin-bottom: 6px; }
.pf-fact b { font-size: 1rem; font-weight: 600; }
.pf-fact a { color: var(--pf-green); text-decoration: none; }

/* sections */
.pf-section { padding: 112px 0; }
.pf-section-story { padding-top: 0; }
.pf-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.pf-results-2 { grid-template-columns: repeat(2, 1fr); }
.pf-results-4 { grid-template-columns: repeat(4, 1fr); }
.pf-result { background: var(--pf-soft); border-radius: var(--pf-r); padding: 32px; }
.pf-big { font-size: 2.25rem; font-weight: 700; color: var(--pf-navy); letter-spacing: -.02em; line-height: 1; }
.pf-result p { margin: 16px 0 0; color: var(--pf-muted); line-height: 1.7; }
.pf-result p b { color: var(--pf-muted); }

/* story */
.pf-story { max-width: 820px; margin: 0 auto; }
.pf-story.has-toc { max-width: none; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; }
.pf-toc { position: sticky; top: 24px; align-self: start; font-size: 13px; }
.pf-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--pf-line); text-decoration: none; color: var(--pf-muted); }
.pf-toc a.on { border-color: var(--pf-navy); color: var(--pf-navy); font-weight: 600; }
.pf-block { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--pf-line); scroll-margin-top: 24px; }
.pf-block:last-child { border: 0; margin: 0; padding: 0; }
.pf-block > h2 { font-size: 1.75rem; margin: 0 0 24px; max-width: 680px; }
.pf-block > h3 { font-size: 1.35rem; margin: 32px 0 16px; }
.pf-block p { max-width: 680px; line-height: 1.75; margin: 0 0 18px; }
.pf-block .list-check { max-width: 680px; }
.pf-goal { background: var(--pf-soft); border-left: 3px solid var(--pf-navy); border-radius: 0 12px 12px 0; padding: 22px 26px; margin-top: 28px; max-width: 680px; }
.pf-goal p { margin: 0; color: var(--pf-navy); font-weight: 500; }
.pf-steps { list-style: none; padding: 0; margin: 8px 0 0; max-width: 680px; }
.pf-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--pf-line); }
.pf-steps li:last-child { border-bottom: 0; }
.pf-steps li > i { color: var(--pf-navy); font-size: 20px; line-height: 1; padding-top: 3px; }
.pf-steps b { display: block; color: var(--pf-navy); margin-bottom: 4px; }
.pf-steps span { color: var(--pf-muted); font-size: 15px; line-height: 1.65; }

/* gallery */
.pf-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 8px; }
.pf-shot { margin: 0; border: 1px solid var(--pf-line); border-radius: var(--pf-r); overflow: hidden; background: #fff; }
.pf-shot img { display: block; width: 100%; cursor: zoom-in; }
.pf-case .pf-shot figcaption { padding: 22px 24px 26px; border-top: 1px solid var(--pf-line); background: #fff; color: var(--pf-text); font-size: 1rem; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; }
.pf-shot figcaption h3 { display: flex; gap: 10px; align-items: center; }
.pf-shot figcaption h3 i { color: var(--pf-muted); font-size: .95em; }
.pf-shot figcaption p { margin: 8px 0 0; color: var(--pf-muted); font-size: 15px; line-height: 1.65; }

/* timeline */
.pf-timeline { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin-top: 8px; }
.pf-timeline-2 { grid-template-columns: repeat(2, 1fr); }
.pf-timeline-4 { grid-template-columns: repeat(4, 1fr); }
.pf-timeline:before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--pf-line); }
.pf-tl { position: relative; padding-right: 20px; }
.pf-tl:before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--pf-navy); display: block; margin-bottom: 20px; position: relative; }
.pf-tl small { display: block; color: var(--pf-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.pf-tl b { display: block; color: var(--pf-navy); margin: 4px 0; }
.pf-tl span { color: var(--pf-muted); font-size: 15px; }
.pf-stack { max-width: 680px; gap: 10px; }
.pf-stack .pf-chip { font-size: 14px; padding: 8px 16px; }

/* testimonial */
.pf-section-quote { padding-top: 0; }
.pf-quote { margin: 0 auto; max-width: 860px; background: var(--pf-soft); border-radius: var(--pf-r); padding: 48px; }
.pf-quote blockquote { margin: 0; font-size: 1.25rem; line-height: 1.6; color: var(--pf-navy); }
.pf-quote figcaption { display: flex; gap: 16px; align-items: center; margin-top: 28px; }
.pf-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pf-quote figcaption b { display: block; color: var(--pf-navy); }
.pf-quote figcaption span { color: var(--pf-muted); font-size: 15px; }

/* related */
.pf-related { background: var(--pf-soft); }
.pf-rel-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; margin-top: 40px; }
.pf-rel-grid.no-services { grid-template-columns: minmax(0, 560px); }
.pf-case-card { background: #fff; border-radius: var(--pf-r); overflow: hidden; text-decoration: none; box-shadow: 0 10px 30px rgba(5, 0, 56, .07); display: flex; flex-direction: column; color: var(--pf-navy); }
.pf-case-card img { display: block; width: 100%; aspect-ratio: 640 / 382; object-fit: cover; }
.pf-case-card .b { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.pf-case-card small { color: var(--pf-muted); }
.pf-case-card b { font-size: 1.1rem; }
.pf-link { color: var(--pf-green-d); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.pf-svc-list { display: grid; gap: 14px; }
.pf-svc { background: #fff; border-radius: 14px; padding: 22px 24px; text-decoration: none; display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; box-shadow: 0 6px 20px rgba(5, 0, 56, .05); color: var(--pf-navy); }
.pf-svc:hover { color: var(--pf-navy); box-shadow: 0 10px 28px rgba(5, 0, 56, .1); }
.pf-svc-ic { color: var(--pf-navy); font-size: 18px; }
.pf-svc b { display: block; }
.pf-svc span span { display: block; color: var(--pf-muted); font-size: 14px; margin-top: 2px; }
.pf-svc > .fa-arrow-right { color: var(--pf-muted); }

/* cta */
.pf-cta { background: var(--pf-navy); color: #fff; border-radius: 24px; padding: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.pf-case .pf-cta h2 { color: #fff; }
.pf-cta-desc { color: rgba(255, 255, 255, .7); margin-top: 14px; }
.pf-cta-desc p { margin: 0; }
.pf-cta .pf-actions { justify-content: flex-end; flex-wrap: nowrap; }
.pf-cta .pf-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.pf-cta .pf-btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

@media (max-width: 991.98px) {
  .pf-hero-grid, .pf-story.has-toc, .pf-rel-grid, .pf-cta { grid-template-columns: 1fr; }
  .pf-hero-grid { gap: 40px; }
  .pf-toc { display: none; }
  .pf-results, .pf-results-2, .pf-results-4 { grid-template-columns: 1fr; }
  .pf-timeline, .pf-timeline-2, .pf-timeline-4 { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .pf-timeline:before { display: none; }
  .pf-cta .pf-actions { justify-content: flex-start; flex-wrap: wrap; }
  .pf-facts .container { grid-template-columns: 1fr 1fr; }
  .pf-fact:nth-child(2n) { border-right: 0; }
}
@media (max-width: 575.98px) {
  .pf-hero { padding: 32px 0 56px; }
  .pf-section { padding: 64px 0; }
  .pf-section-story, .pf-section-quote { padding-top: 0; }
  .pf-block { padding-bottom: 48px; margin-bottom: 48px; }
  .pf-gallery, .pf-timeline, .pf-timeline-2, .pf-timeline-4 { grid-template-columns: 1fr; }
  .pf-client { flex-wrap: wrap; gap: 8px; }
  .pf-client span { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .pf-fact { padding: 22px 16px; }
  .pf-cta { padding: 32px 22px; border-radius: 20px; }
  .pf-quote { padding: 28px 22px; }
}

/* 2026-10-17: screenshot captions – compact title and description (the design system's h3/p sizes were winning) */
:root :is(#ds-boost, .pf-case) .pf-shot figcaption { padding: 14px 18px 16px; }
:root :is(#ds-boost, .pf-case) .pf-shot figcaption h3 { margin: 0; font-size: .875rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; gap: 8px; color: var(--pf-text); }
:root :is(#ds-boost, .pf-case) .pf-shot figcaption h3 i { font-size: .875rem; color: var(--pf-muted); }
:root :is(#ds-boost, .pf-case) .pf-shot figcaption p { margin: 2px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--pf-muted); }
/* next case study: same screenshot as on Our work, top of the page visible */
.pf-case-card img { object-position: top center; }