/*
 * Custom CSS for: seo case studies
 * Page: /seo-case-studies
 * Generated: 2026-10-16 09:36:49
 */

/* JDG portfolio section styling - custom RedSun-inspired art direction.
   This is a section-scoped stylesheet, not the Reportly page CSS.
   Pairs with jdg-portfolio-sections.html and jdg-portfolio-sections.js */
main.jdg-portfolio-sections {
  --color-primary: var(--jdg-brand-primary, #6366f1);
  --color-primary-hover: var(--jdg-brand-primary-hover, #5356db);
  --color-secondary: var(--jdg-brand-secondary, #39d6b2);
  --color-bg: #0b0c10;
  --color-surface: #12141a;
  --color-elevated: #191c23;
  --color-text: #f5f6fa;
  --color-muted: #abb1bd;
  --color-subtle: #828995;
  --color-border: rgba(255, 255, 255, .105);
  --font-body: var(--jdg-body-font-family, "Manrope", sans-serif);
  --font-heading: var(--jdg-heading-font-family, "Funnel Display", sans-serif);
  --font-button: var(--jdg-satoshi-font-family, "Satoshi", sans-serif);
  --container-width: 1660px;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  color-scheme: dark;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main.jdg-portfolio-sections *,
main.jdg-portfolio-sections *::before,
main.jdg-portfolio-sections *::after {
  box-sizing: border-box
}

main.jdg-portfolio-sections :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol) {
  margin: 0
}

main.jdg-portfolio-sections :where(a) {
  color: inherit;
  text-decoration: none
}

main.jdg-portfolio-sections :where(button, select) {
  font: inherit
}

main.jdg-portfolio-sections :where(button) {
  color: inherit;
  cursor: pointer
}

main.jdg-portfolio-sections :where(img, svg, iframe) {
  display: block;
  max-width: 100%
}

main.jdg-portfolio-sections :where(img) {
  height: auto
}

main.jdg-portfolio-sections :where([hidden]) {
  display: none !important
}

main.jdg-portfolio-sections :where(a, button, summary, select):focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px
}

main.jdg-portfolio-sections::selection,
main.jdg-portfolio-sections *::selection {
  background: var(--color-primary);
  color: #fff
}

main.jdg-portfolio-sections .container {
  width: min(var(--container-width), calc(100% - 96px));
  margin-inline: auto
}

main.jdg-portfolio-sections .section {
  position: relative;
  padding-block: clamp(78px, 9vw, 124px);
  scroll-margin-top: 32px
}

main.jdg-portfolio-sections .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: #a9a2ff;
  font-family: var(--font-button);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

main.jdg-portfolio-sections .line {
  width: 25px;
  height: 1px;
  background: var(--color-secondary);
  flex: 0 0 auto
}

/* Breadcrumb path above the hero heading. */
main.jdg-portfolio-sections .breadcrumbs {
  margin-bottom: 18px
}

main.jdg-portfolio-sections .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections .breadcrumbs li {
  display: flex;
  align-items: center;
  color: #8a919e;
  font-family: var(--font-button);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase
}

main.jdg-portfolio-sections .breadcrumbs li+li::before {
  margin-inline: 9px;
  color: #5c636f;
  content: "/"
}

main.jdg-portfolio-sections .breadcrumbs a {
  color: #a9a2ff;
  transition: color .18s ease
}

main.jdg-portfolio-sections .breadcrumbs a:hover {
  color: #d6d2ff;
  text-decoration: underline;
  text-underline-offset: 3px
}

main.jdg-portfolio-sections .breadcrumbs [aria-current="page"] {
  color: #e6e7ec
}

main.jdg-portfolio-sections .gradient-text {
  color: #b2a8ff;
  background: linear-gradient(95deg, #c2baff 0%, #8d80ff 54%, #52d9bd 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

main.jdg-portfolio-sections :where(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08
}

main.jdg-portfolio-sections h1 {
  font-size: clamp(3.2rem, 6.2vw, 3.35rem);
  letter-spacing: -.065em
}

main.jdg-portfolio-sections h2 {
  font-size: clamp(2.35rem, 4.2vw, 4.5rem);
  letter-spacing: -.055em
}

main.jdg-portfolio-sections h3 {
  font-size: clamp(1.25rem, 2vw, 1.8rem)
}

main.jdg-portfolio-sections h4 {
  font-size: 1rem;
  letter-spacing: -.02em
}

main.jdg-portfolio-sections p {
  color: var(--color-muted)
}

main.jdg-portfolio-sections .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(112deg, #7465ff 0%, #6556e8 58%, #5145c6 100%);
  box-shadow: 0 12px 32px rgba(91, 80, 228, .2), inset 0 1px rgba(255, 255, 255, .16);
  color: #fff;
  font-family: var(--font-button);
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

main.jdg-portfolio-sections .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(91, 80, 228, .3), inset 0 1px rgba(255, 255, 255, .18)
}

main.jdg-portfolio-sections .button-outline {
  border-color: rgba(255, 255, 255, .19);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  color: #f5f6fa
}

main.jdg-portfolio-sections .button-outline:hover {
  border-color: rgba(162, 151, 255, .7);
  background: rgba(116, 101, 255, .1);
  box-shadow: none
}

main.jdg-portfolio-sections .text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c2bcff;
  font-family: var(--font-button);
  font-size: .83rem;
  font-weight: 650;
  text-decoration: none;
}

main.jdg-portfolio-sections .text-link::after {
  content: "\2197";
  color: var(--color-secondary);
  transition: transform .18s ease
}

main.jdg-portfolio-sections .text-link:hover::after {
  transform: translate(2px, -2px)
}

/* Single results methodology note, placed once below the case studies. */
main.jdg-portfolio-sections .methodology-note {
  margin: 24px auto 0;
  padding: 14px 18px;
  border-left: 2px solid rgba(130, 117, 255, .75);
  background: linear-gradient(90deg, rgba(98, 86, 232, .1), rgba(98, 86, 232, .025));
  color: #9298a4;
  font-size: .73rem;
  line-height: 1.7;
}

main.jdg-portfolio-sections .methodology-note strong {
  color: #c8c3ff;
  font-weight: 700
}

main.jdg-portfolio-sections .local-evidence-note {
  margin: 22px auto 0;
  padding: 14px 18px;
  border-left: 2px solid rgba(130, 117, 255, .75);
  background: linear-gradient(90deg, rgba(98, 86, 232, .1), rgba(98, 86, 232, .025));
  color: #9298a4;
  font-size: .73rem;
  line-height: 1.7;
}

main.jdg-portfolio-sections .local-evidence-note strong {
  color: #c8c3ff;
  font-weight: 700
}

/* Opening spread: large editorial type paired with a compact evidence dashboard. */
main.jdg-portfolio-sections .hero {
    padding-top: 220px !important;
  background: radial-gradient(ellipse at 74% 44%, rgba(92, 79, 225, .13), transparent 36%), radial-gradient(ellipse at 7% 6%, rgba(57, 214, 178, .055), transparent 32%), #0b0c10;
}

main.jdg-portfolio-sections .hero::after {
  position: absolute;
  right: 5%;
  bottom: 40px;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 140, 255, .35), transparent);
  content: "";
  pointer-events: none;
}

main.jdg-portfolio-sections .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr);
  align-items: center;
  gap: clamp(38px, 6vw, 92px)
}

main.jdg-portfolio-sections .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

main.jdg-portfolio-sections .hero-copy h1 {
  max-width: 100%;
  margin-bottom: 24px
}

main.jdg-portfolio-sections .hero-copy h1 .gradient-text {
  display: inline-block
}

main.jdg-portfolio-sections .hero-description {
  max-width: 55ch;
  font-size: 1.02rem;
  line-height: 1.8
}

main.jdg-portfolio-sections .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

main.jdg-portfolio-sections .hero-call-note {
  margin-top: 17px;
  color: #858c99;
  font-size: .78rem
}

main.jdg-portfolio-sections .hero-capabilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 27px;
  color: #d0d3dc;
  font-family: var(--font-button);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .055em
}

main.jdg-portfolio-sections .hero-capabilities span {
  color: var(--color-secondary)
}

main.jdg-portfolio-sections .hero-dashboard {
  position: relative;
  padding: clamp(23px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(31, 33, 43, .96), rgba(15, 16, 21, .98) 72%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .07);
  transform: translateY(14px);
}

main.jdg-portfolio-sections .hero-dashboard::before {
  position: absolute;
  top: -1px;
  left: 24px;
  width: 78px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  content: ""
}

main.jdg-portfolio-sections .dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border)
}

main.jdg-portfolio-sections .dashboard-title {
  color: #f2f3f8;
  font-family: var(--font-button);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.65
}

main.jdg-portfolio-sections .dashboard-title small {
  display: block;
  margin-top: 3px;
  color: #858b97;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0
}

main.jdg-portfolio-sections .dashboard-tag {
  padding: 5px 11px;
  border: 1px solid rgba(57, 214, 178, .32);
  border-radius: 999px;
  background: rgba(57, 214, 178, .07);
  color: #68e5c9;
  font-family: var(--font-button);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em
}

main.jdg-portfolio-sections .dashboard-primary {
  padding: 25px 0 8px
}

main.jdg-portfolio-sections .dashboard-primary .eyebrow {
  margin-bottom: 2px;
  color: #7e8693;
  font-size: .61rem
}

main.jdg-portfolio-sections .hero-result-number {
  display: block;
  color: #a69aff;
  font-family: var(--font-heading);
  font-size: clamp(3.6rem, 6vw, 5.1rem);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: 1.05
}

main.jdg-portfolio-sections .hero-result-number .number-plus {
  color: var(--color-secondary)
}

main.jdg-portfolio-sections .hero-result-number>span:last-child {
  font-size: .62em
}

main.jdg-portfolio-sections .dashboard-primary>p {
  margin-top: 8px;
  color: #f1f1f5;
  font-size: .94rem;
  font-weight: 600
}

main.jdg-portfolio-sections .dashboard-primary>p>span {
  padding-inline: 5px;
  color: var(--color-secondary)
}

main.jdg-portfolio-sections .dashboard-primary>p small {
  margin-left: 5px;
  color: #8b919d;
  font-size: .74rem;
  font-weight: 400
}

main.jdg-portfolio-sections .hero-bars {
  display: grid;
  gap: 11px;
  margin: 14px 0 22px
}

main.jdg-portfolio-sections .hero-bars>div {
  display: grid;
  grid-template-columns: 48px minmax(60px, 1fr) 42px;
  align-items: center;
  gap: 10px
}

main.jdg-portfolio-sections .hero-bars>div>span {
  color: #8f96a2;
  font-size: .7rem
}

main.jdg-portfolio-sections .hero-bars i {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #282a32
}

main.jdg-portfolio-sections .hero-bars i::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--width, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #5f54d7, #4bd6b7);
  content: ""
}

main.jdg-portfolio-sections .hero-bars b {
  color: #dedfe5;
  font-family: var(--font-button);
  font-size: .72rem;
  text-align: right
}

main.jdg-portfolio-sections .dashboard-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

main.jdg-portfolio-sections .dashboard-secondary>div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025)
}

main.jdg-portfolio-sections .dashboard-secondary span {
  display: block;
  margin-bottom: 6px;
  color: #818895;
  font-family: var(--font-button);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .12em
}

main.jdg-portfolio-sections .dashboard-secondary strong {
  color: #f2f3f6;
  font-size: .93rem;
  font-weight: 600
}

main.jdg-portfolio-sections .dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 17px;
  color: #8c929d;
  font-size: .7rem
}

main.jdg-portfolio-sections .dashboard-footer a {
  color: #b8b0ff;
  font-weight: 600
}

main.jdg-portfolio-sections .hero-result-ribbon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--color-border)
}

main.jdg-portfolio-sections .hero-result-ribbon>span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  color: #b8bdc7;
  font-size: .72rem
}

main.jdg-portfolio-sections .hero-result-ribbon b {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600
}

main.jdg-portfolio-sections .hero-result-ribbon small {
  grid-column: 1/-1;
  margin-top: 3px;
  color: #7d8490;
  font-size: .63rem
}

/* Narrow agency proof strip. */
main.jdg-portfolio-sections .trust-strip {
  position: relative;
  z-index: 1;
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: #101217
}

main.jdg-portfolio-sections .trust-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, minmax(100px, .62fr));
  align-items: center;
  gap: 18px;
  padding-block: 21px
}

main.jdg-portfolio-sections .trust-grid>p {
  color: #a0a6b2;
  font-size: .84rem;
  line-height: 1.45
}

main.jdg-portfolio-sections .trust-grid>p strong {
  color: #f4f4f7;
  font-weight: 600
}

main.jdg-portfolio-sections .trust-grid>div {
  display: grid;
  gap: 1px;
  padding-left: 17px;
  border-left: 1px solid rgba(255, 255, 255, .11)
}

main.jdg-portfolio-sections .trust-grid>div strong {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.03em
}

main.jdg-portfolio-sections .trust-grid>div span {
  color: #8e95a2;
  font-size: .68rem
}

/* Metrics: a restrained four-card proof ledger. */
main.jdg-portfolio-sections .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 40px
}

main.jdg-portfolio-sections .section-heading>div {
  max-width: 720px
}

main.jdg-portfolio-sections .section-heading h2 {
  max-width: 19ch
}

main.jdg-portfolio-sections .section-heading>p {
  max-width: 420px;
  padding-bottom: 5px;
  font-size: .94rem;
  line-height: 1.75
}

main.jdg-portfolio-sections .results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px
}

main.jdg-portfolio-sections .results-grid>a {
  position: relative;
  display: flex;
  min-height: 214px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 19px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: linear-gradient(145deg, #171920, #111318 78%);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

main.jdg-portfolio-sections .results-grid>a::before {
  position: absolute;
  top: 0;
  left: 20px;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  content: ""
}

main.jdg-portfolio-sections .results-grid>a:hover {
  transform: translateY(-4px);
  border-color: rgba(153, 142, 255, .42);
  background: linear-gradient(145deg, #1c1e26, #12141a)
}

main.jdg-portfolio-sections .results-grid>a>span {
  color: #b6bbc5;
  font-size: .78rem;
  font-weight: 600
}

main.jdg-portfolio-sections .results-grid>a>strong {
  color: #a69aff;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1
}

main.jdg-portfolio-sections .results-grid>a>p {
  color: #d5d7de;
  font-size: .77rem
}

main.jdg-portfolio-sections .results-grid>a>small {
  color: #818894;
  font-size: .65rem;
  line-height: 1.5
}

/* Alternating, image-led case studies. */
main.jdg-portfolio-sections .featured-section {
  padding-top: 45px
}

main.jdg-portfolio-sections .featured-stack {
  display: grid;
  gap: 19px
}

main.jdg-portfolio-sections .featured-case {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(26px, 4vw, 58px);
  padding: clamp(22px, 3.6vw, 44px);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: linear-gradient(125deg, rgba(255, 255, 255, .025), transparent 48%), #111319;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .16);
}

main.jdg-portfolio-sections .featured-case:nth-child(even) {
  grid-template-columns: minmax(0, 1.22fr) minmax(250px, .78fr)
}

main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-copy {
  order: 2
}

main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-visual {
  order: 1
}

main.jdg-portfolio-sections .featured-copy {
  max-width: 460px
}

main.jdg-portfolio-sections .featured-copy .eyebrow {
  margin-bottom: 13px;
  color: #9198a5;
  font-size: .62rem
}

main.jdg-portfolio-sections .feature-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 11px;
  margin-bottom: 8px
}

main.jdg-portfolio-sections .result-number {
  color: #a99eff;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1
}

main.jdg-portfolio-sections .result-label {
  color: #d4d6de;
  font-size: .82rem;
  font-weight: 600
}

main.jdg-portfolio-sections .quiet-client {
  margin-bottom: 12px;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 500
}

main.jdg-portfolio-sections .featured-copy>p:not(.eyebrow):not(.feature-result) {
  max-width: 48ch;
  font-size: .88rem;
  line-height: 1.75
}

main.jdg-portfolio-sections .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 17px 0 19px;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections .tags li {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #aeb4bf;
  font-size: .65rem;
  line-height: 1.2
}

main.jdg-portfolio-sections .featured-visual {
  min-width: 0
}

main.jdg-portfolio-sections .gsc-evidence {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: #0b0d11
}

main.jdg-portfolio-sections .gsc-image-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: #a1a7b2;
  font-family: var(--font-button);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase
}

main.jdg-portfolio-sections .proof-image-trigger,
main.jdg-portfolio-sections .local-image-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #171a20;
  text-align: left
}

main.jdg-portfolio-sections .proof-image-trigger img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #101217
}

main.jdg-portfolio-sections .proof-image-trigger .image-enlarge-label,
main.jdg-portfolio-sections .local-image-trigger .image-enlarge-label {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(8, 9, 12, .83);
  color: #fff;
  font-size: .62rem;
  opacity: 0;
  transition: opacity .18s ease
}

main.jdg-portfolio-sections .proof-image-trigger:hover .image-enlarge-label,
main.jdg-portfolio-sections .local-image-trigger:hover .image-enlarge-label,
main.jdg-portfolio-sections .proof-image-trigger:focus-visible .image-enlarge-label,
main.jdg-portfolio-sections .local-image-trigger:focus-visible .image-enlarge-label {
  opacity: 1
}

main.jdg-portfolio-sections .gsc-evidence figcaption {
  padding: 11px 2px 1px
}

main.jdg-portfolio-sections .gsc-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

main.jdg-portfolio-sections .gsc-totals>div {
  display: grid;
  gap: 2px
}

main.jdg-portfolio-sections .gsc-totals span {
  color: #818895;
  font-size: .61rem;
  text-transform: uppercase;
  letter-spacing: .075em
}

main.jdg-portfolio-sections .gsc-totals strong {
  color: #f0f1f5;
  font-size: .84rem;
  font-weight: 600
}

main.jdg-portfolio-sections .gsc-totals small {
  color: #7c8491;
  font-size: .59rem
}

main.jdg-portfolio-sections .gsc-period {
  margin-top: 8px;
  color: #a3a9b4;
  font-size: .65rem
}

main.jdg-portfolio-sections .feature-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px
}

main.jdg-portfolio-sections .metric-pair {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025)
}

main.jdg-portfolio-sections .metric-pair>span {
  color: #89909c;
  font-size: .68rem
}

main.jdg-portfolio-sections .metric-pair strong {
  color: #eff0f4;
  font-family: var(--font-button);
  font-size: .76rem;
  font-weight: 650;
  text-align: right;
  white-space: nowrap
}

main.jdg-portfolio-sections .metric-pair em {
  color: var(--color-secondary);
  font-style: normal
}

main.jdg-portfolio-sections .metric-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(57, 214, 178, .18);
  border-radius: 10px;
  background: rgba(57, 214, 178, .055);
  color: #cdebe3;
  font-size: .8rem
}

main.jdg-portfolio-sections .feature-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #c1baff;
  font-family: var(--font-button);
  font-size: .75rem;
  font-weight: 650
}

main.jdg-portfolio-sections .feature-call::after {
  content: "\2197";
  color: var(--color-secondary)
}

/* Split conversation panels - two distinct blocks, never a circular/ring CTA. */
main.jdg-portfolio-sections .campaign-cta {
  position: relative;
  padding-block: clamp(28px, 4vw, 52px);
  overflow: visible;
  background: transparent
}

main.jdg-portfolio-sections .campaign-cta-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .72fr);
  align-items: center;
  gap: clamp(24px, 5vw, 76px);
  padding: clamp(27px, 4.7vw, 58px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 2px solid var(--color-primary);
  border-radius: 18px;
  background: linear-gradient(105deg, rgba(99, 102, 241, .09), transparent 47%), linear-gradient(140deg, #171920, #101217 76%);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .05);
}

main.jdg-portfolio-sections .campaign-cta.cta-violet .campaign-cta-grid {
  border-left-color: #8b7bff;
  background: linear-gradient(105deg, rgba(118, 101, 255, .12), transparent 48%), linear-gradient(140deg, #171920, #101217 76%)
}

main.jdg-portfolio-sections .campaign-cta.cta-mint .campaign-cta-grid {
  border-left-color: var(--color-secondary);
  background: linear-gradient(105deg, rgba(57, 214, 178, .09), transparent 48%), linear-gradient(140deg, #171920, #101217 76%)
}

main.jdg-portfolio-sections .campaign-cta.cta-indigo .campaign-cta-grid {
  border-left-color: #6175ef;
  background: linear-gradient(105deg, rgba(77, 105, 235, .12), transparent 48%), linear-gradient(140deg, #171920, #101217 76%)
}

main.jdg-portfolio-sections .campaign-cta-grid>div:first-child {
  max-width: 700px
}

main.jdg-portfolio-sections .campaign-cta h2 {
  max-width: 18ch;
  margin-bottom: 15px;
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.65rem)
}

main.jdg-portfolio-sections .campaign-description {
  max-width: 60ch;
  font-size: .9rem;
  line-height: 1.8
}

main.jdg-portfolio-sections .campaign-action {
  padding: 21px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 13px;
  background: rgba(8, 9, 13, .56);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035)
}

main.jdg-portfolio-sections .campaign-call-label {
  margin-bottom: 11px;
  color: #f0f0f4;
  font-family: var(--font-button);
  font-size: .76rem;
  font-weight: 700
}

main.jdg-portfolio-sections .campaign-action ul {
  display: grid;
  gap: 0;
  margin: 0 0 17px;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections .campaign-action li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #b8bec8;
  font-size: .77rem;
  line-height: 1.5
}

main.jdg-portfolio-sections .campaign-action li:last-child {
  border-bottom: 0
}

main.jdg-portfolio-sections .campaign-action li::before {
  position: absolute;
  top: 10px;
  left: 0;
  color: var(--color-secondary);
  content: "\2197";
  font-size: .76rem
}

main.jdg-portfolio-sections .campaign-action .button {
  width: 100%
}

main.jdg-portfolio-sections .campaign-footnote {
  margin-top: 10px;
  color: #7f8793;
  font-size: .65rem;
  text-align: center
}

/* Local search proof gallery and image viewer.
   The whole section is hidden in the markup until details are confirmed. */
main.jdg-portfolio-sections .local-seo-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 40%)
}

main.jdg-portfolio-sections .local-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 26px
}

main.jdg-portfolio-sections .local-summary>div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: #12151a
}

main.jdg-portfolio-sections .local-summary strong {
  color: #a89dff;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1
}

main.jdg-portfolio-sections .local-summary span {
  color: #aeb4bf;
  font-size: .76rem;
  line-height: 1.5
}

main.jdg-portfolio-sections .local-summary>p {
  grid-column: 1/-1;
  max-width: 76ch;
  padding: 3px 2px;
  font-size: .84rem
}

main.jdg-portfolio-sections .local-evidence-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px
}

main.jdg-portfolio-sections .local-evidence {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: linear-gradient(145deg, #15171e, #101217)
}

main.jdg-portfolio-sections .local-before-after-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
  color: #a7adba;
  font-family: var(--font-button);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em
}

main.jdg-portfolio-sections .local-before-after-labels span:last-child {
  color: #6ee0c3
}

main.jdg-portfolio-sections .local-image-trigger img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  background: #0c0e12
}

main.jdg-portfolio-sections .local-evidence-heading {
  display: grid;
  grid-template-columns: minmax(95px, .55fr) minmax(0, 1.45fr);
  gap: 15px;
  padding: 16px 4px 4px
}

main.jdg-portfolio-sections .local-evidence-heading>div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px
}

main.jdg-portfolio-sections .local-evidence-heading>div:first-child strong {
  color: #a79aff;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1
}

main.jdg-portfolio-sections .local-evidence-heading>div:first-child span {
  color: #8a919e;
  font-size: .65rem;
  line-height: 1.4
}

main.jdg-portfolio-sections .evidence-index {
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-family: var(--font-button);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em
}

main.jdg-portfolio-sections .local-evidence-heading h3 {
  margin-bottom: 6px;
  color: #f1f2f6;
  font-size: 1.12rem;
  letter-spacing: -.025em
}

main.jdg-portfolio-sections .local-evidence-heading>div:last-child>p:last-child {
  color: #9198a4;
  font-size: .68rem;
  line-height: 1.6
}

main.jdg-portfolio-sections .evidence-lightbox {
  width: min(1100px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 15px;
  background: #0c0d11;
  color: #fff;
  box-shadow: 0 30px 100px #000b
}

main.jdg-portfolio-sections .evidence-lightbox::backdrop {
  background: rgba(2, 3, 6, .86);
  backdrop-filter: blur(7px)
}

main.jdg-portfolio-sections .lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 2px 2px 12px
}

main.jdg-portfolio-sections .lightbox-toolbar p {
  color: #d8dae1;
  font-family: var(--font-button);
  font-size: .76rem;
  font-weight: 600
}

main.jdg-portfolio-sections .lightbox-close {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #191b21;
  color: #f2f3f6;
  font-size: .72rem
}

main.jdg-portfolio-sections .evidence-lightbox>img {
  width: 100%;
  max-height: calc(100vh - 100px);
  object-fit: contain
}

/* Project index: filterable cards with expandable case notes. */
main.jdg-portfolio-sections .filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px
}

main.jdg-portfolio-sections .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

main.jdg-portfolio-sections .filters button {
  min-height: 33px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: #aab0bb;
  font-size: .68rem;
  transition: all .18s ease
}

main.jdg-portfolio-sections .filters button:hover {
  border-color: rgba(166, 153, 255, .55);
  color: #f2f1ff
}

main.jdg-portfolio-sections .filters button[aria-pressed="true"] {
  border-color: rgba(156, 143, 255, .55);
  background: rgba(111, 95, 239, .17);
  color: #e0dcff
}

main.jdg-portfolio-sections .filter-count {
  flex: 0 0 auto;
  color: #8c929d;
  font-size: .69rem
}

main.jdg-portfolio-sections .portfolio-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  margin: 0 0 22px;
  padding: 19px 21px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(99, 102, 241, .085), rgba(255, 255, 255, .015) 55%)
}

main.jdg-portfolio-sections .portfolio-selection>div {
  display: flex;
  align-items: center;
  gap: 14px
}

main.jdg-portfolio-sections .portfolio-selection p {
  font-size: .78rem;
  line-height: 1.55
}

main.jdg-portfolio-sections .portfolio-selection>p {
  max-width: 38ch;
  color: #8f96a2
}

main.jdg-portfolio-sections .portfolio-selection .button {
  min-height: 39px;
  padding: 9px 14px;
  font-size: .69rem
}

main.jdg-portfolio-sections .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px
}

main.jdg-portfolio-sections .project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: linear-gradient(145deg, #16181f, #101217);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

main.jdg-portfolio-sections .project-card:hover {
  transform: translateY(-3px);
  border-color: rgba(150, 139, 255, .31);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .23)
}

main.jdg-portfolio-sections .project-card>.gsc-evidence {
  padding: 11px;
  border: 0;
  border-radius: 0;
  background: #0d0f14
}

main.jdg-portfolio-sections .project-card .gsc-image-heading {
  font-size: .53rem
}

main.jdg-portfolio-sections .project-card .proof-image-trigger img {
  max-height: 180px
}

main.jdg-portfolio-sections .project-card .gsc-evidence figcaption {
  padding-top: 8px
}

main.jdg-portfolio-sections .project-card .gsc-totals {
  gap: 6px
}

main.jdg-portfolio-sections .project-card .gsc-totals span {
  font-size: .53rem
}

main.jdg-portfolio-sections .project-card .gsc-totals strong {
  font-size: .7rem
}

main.jdg-portfolio-sections .project-card .gsc-period {
  font-size: .57rem
}

main.jdg-portfolio-sections .project-body {
  padding: 16px 16px 15px
}

main.jdg-portfolio-sections .project-result {
  margin-bottom: 6px;
  color: #a99eff;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.15
}

main.jdg-portfolio-sections .project-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px
}

main.jdg-portfolio-sections .project-heading .quiet-client {
  margin: 0;
  color: #f2f3f6;
  font-size: 1.1rem;
  letter-spacing: -.025em
}

main.jdg-portfolio-sections .project-heading>span {
  color: #7f8793;
  font-size: .6rem;
  text-align: right
}

main.jdg-portfolio-sections .project-body .tags {
  margin: 11px 0 3px;
  gap: 5px
}

main.jdg-portfolio-sections .project-body .tags li {
  padding: 4px 7px;
  font-size: .58rem
}

main.jdg-portfolio-sections .case-details {
  margin-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .085)
}

main.jdg-portfolio-sections .case-details>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0 2px;
  color: #c2bcff;
  font-family: var(--font-button);
  font-size: .71rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none
}

main.jdg-portfolio-sections .case-details>summary::-webkit-details-marker {
  display: none
}

main.jdg-portfolio-sections .case-details>summary span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(166, 153, 255, .3);
  border-radius: 50%;
  color: #b6adff;
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease
}

main.jdg-portfolio-sections .case-details[open]>summary span {
  transform: rotate(45deg)
}

main.jdg-portfolio-sections .case-content {
  display: grid;
  gap: 8px;
  padding: 13px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

main.jdg-portfolio-sections .case-content h4 {
  margin-top: 4px;
  color: #f1f2f6;
  font-family: var(--font-button);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em
}

main.jdg-portfolio-sections .case-content>p {
  color: #a3aab5;
  font-size: .68rem;
  line-height: 1.65
}

main.jdg-portfolio-sections .case-content .case-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px
}

main.jdg-portfolio-sections .case-content .metric-pair {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px
}

main.jdg-portfolio-sections .case-content .metric-pair>span {
  font-size: .58rem
}

main.jdg-portfolio-sections .case-content .metric-pair strong {
  font-size: .65rem;
  text-align: left;
  white-space: normal
}

/* Evidence button inside an expanded case study - opens the card screenshot in the lightbox. */
main.jdg-portfolio-sections .evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: #c2bcff;
  font-family: var(--font-button);
  font-size: .67rem;
  font-weight: 650;
  text-align: left
}

main.jdg-portfolio-sections .evidence-link::after {
  content: "\2197";
  color: var(--color-secondary);
  transition: transform .18s ease
}

main.jdg-portfolio-sections .evidence-link:hover::after {
  transform: translate(2px, -2px)
}

/* One-line footnote for services that do not carry a result claim on this page. */
main.jdg-portfolio-sections .services-aside {
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  color: #969daa;
  font-size: .72rem;
  line-height: 1.7
}

main.jdg-portfolio-sections .services-aside a {
  color: #c2bcff;
  text-decoration: underline;
  text-decoration-color: rgba(194, 188, 255, .35);
  text-underline-offset: 3px
}

main.jdg-portfolio-sections .services-aside a:hover {
  color: #ded9ff
}

/* Comparison window shown beside metrics where the period is known. */
main.jdg-portfolio-sections .metric-window {
  margin: 12px 0 -4px;
  color: #8d94a1;
  font-size: .62rem;
  letter-spacing: .02em
}

main.jdg-portfolio-sections .data-note {
  padding: 9px 10px;
  border-left: 2px solid rgba(57, 214, 178, .45);
  background: rgba(57, 214, 178, .045);
  color: #858d99;
  font-size: .61rem;
  line-height: 1.6
}

main.jdg-portfolio-sections .case-content .gsc-evidence {
  margin-top: 5px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px
}

main.jdg-portfolio-sections .case-content .proof-image-trigger img {
  max-height: 210px
}

main.jdg-portfolio-sections .case-content .gsc-totals {
  grid-template-columns: 1fr 1fr
}

main.jdg-portfolio-sections .case-content .gsc-totals span {
  font-size: .53rem
}

main.jdg-portfolio-sections .case-content .gsc-totals strong {
  font-size: .68rem
}

main.jdg-portfolio-sections .case-content .text-link {
  font-size: .67rem
}

/* Before/after selector and chart. */
main.jdg-portfolio-sections .comparison-section {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .018), transparent)
}

main.jdg-portfolio-sections .comparison-shell {
  display: grid;
  grid-template-columns: minmax(215px, .62fr) minmax(0, 1.38fr);
  gap: 15px;
  align-items: stretch
}

main.jdg-portfolio-sections .comparison-controls,
main.jdg-portfolio-sections .comparison-body {
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: #12151a
}

main.jdg-portfolio-sections .comparison-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px
}

main.jdg-portfolio-sections .comparison-controls label {
  color: #e8e9ee;
  font-family: var(--font-button);
  font-size: .75rem;
  font-weight: 700
}

main.jdg-portfolio-sections #compare-project {
  width: 100%;
  min-height: 43px;
  padding: 9px 34px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 9px;
  background: #0d0f13;
  color: #f2f3f6;
  font-size: .76rem
}

main.jdg-portfolio-sections .comparison-controls>p {
  color: #828a96;
  font-size: .69rem;
  line-height: 1.6
}

main.jdg-portfolio-sections .comparison-controls .text-link {
  margin-top: auto
}

main.jdg-portfolio-sections .comparison-body h3 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 1.45rem
}

main.jdg-portfolio-sections .comparison-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px
}

main.jdg-portfolio-sections .comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px 12px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .022)
}

main.jdg-portfolio-sections .comparison-row>span {
  color: #a6acb7;
  font-size: .69rem
}

main.jdg-portfolio-sections .comparison-row>strong {
  color: #b6adff;
  font-family: var(--font-button);
  font-size: .76rem;
  font-weight: 700;
  text-align: right
}

main.jdg-portfolio-sections .comparison-row>p {
  grid-column: 1/-1;
  color: #d5d7de;
  font-size: .68rem;
  line-height: 1.5
}

main.jdg-portfolio-sections .comparison-row>p span {
  padding: 0 4px;
  color: var(--color-secondary)
}

main.jdg-portfolio-sections .comparison-row>p small {
  color: #828995;
  font-size: .59rem
}

main.jdg-portfolio-sections .comparison-row.decline>strong {
  color: #f59a9a
}

main.jdg-portfolio-sections .comparison-track {
  grid-column: 1/-1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #262932
}

main.jdg-portfolio-sections .comparison-track>span {
  display: block;
  height: 100%;
  border-radius: inherit
}

main.jdg-portfolio-sections .before-bar {
  background: #737b8a
}

main.jdg-portfolio-sections .after-bar {
  background: linear-gradient(90deg, #7366f3, #45d5b2)
}

main.jdg-portfolio-sections .comparison-row.decline .after-bar {
  background: #e48686
}

main.jdg-portfolio-sections .chart-legend {
  display: flex;
  gap: 17px;
  margin-top: 13px;
  color: #89909b;
  font-size: .64rem
}

main.jdg-portfolio-sections .chart-legend>span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

main.jdg-portfolio-sections .chart-legend i {
  display: block;
  width: 13px;
  height: 5px;
  border-radius: 4px
}

main.jdg-portfolio-sections .comparison-body>.data-note {
  margin-top: 15px
}

/* Capabilities and sector list. */
main.jdg-portfolio-sections .services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px
}

main.jdg-portfolio-sections .services-grid>article {
  position: relative;
  min-height: 205px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: linear-gradient(145deg, #171920, #111318);
  transition: transform .2s ease, border-color .2s ease
}

main.jdg-portfolio-sections .services-grid>article:hover {
  transform: translateY(-3px);
  border-color: rgba(148, 136, 255, .38)
}

main.jdg-portfolio-sections .service-number {
  display: inline-flex;
  margin-bottom: 23px;
  color: var(--color-secondary);
  font-family: var(--font-button);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em
}

main.jdg-portfolio-sections .services-grid h3 {
  margin-bottom: 10px;
  color: #f5f5f8;
  font-size: 1.28rem
}

main.jdg-portfolio-sections .services-grid article>p {
  margin-bottom: 14px;
  font-size: .76rem;
  line-height: 1.7
}

main.jdg-portfolio-sections .services-grid .text-link {
  font-size: .7rem
}

main.jdg-portfolio-sections .industry-section {
  padding-block: clamp(68px, 8vw, 104px);
  border-block: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(105deg, rgba(99, 102, 241, .08), transparent 51%), #101217
}

main.jdg-portfolio-sections .industry-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(32px, 7vw, 95px)
}

main.jdg-portfolio-sections .industry-grid h2 {
  max-width: 13ch
}

main.jdg-portfolio-sections .industry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 0;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections .industry-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

main.jdg-portfolio-sections .industry-list li>span {
  color: #e4e5eb;
  font-size: .8rem
}

main.jdg-portfolio-sections .industry-list li>small {
  color: #858c98;
  font-size: .64rem;
  text-align: right
}

/* Testimonial story card with manual navigation. */
main.jdg-portfolio-sections .testimonial-section {
  overflow: hidden
}

main.jdg-portfolio-sections .testimonial-navigation {
  display: flex;
  align-items: center;
  gap: 12px
}

main.jdg-portfolio-sections .testimonial-navigation button {
  width: 37px;
  height: 37px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background: #15171d;
  color: #e1e2e7;
  font-size: 1.1rem;
  transition: border-color .18s ease, background .18s ease
}

main.jdg-portfolio-sections .testimonial-navigation button:hover {
  border-color: rgba(163, 151, 255, .55);
  background: rgba(106, 92, 230, .15)
}

main.jdg-portfolio-sections #testimonial-position {
  min-width: 42px;
  color: #979eaa;
  font-family: var(--font-button);
  font-size: .68rem;
  text-align: center
}

main.jdg-portfolio-sections .testimonial-list {
  position: relative;
  min-height: 240px
}

main.jdg-portfolio-sections .testimonial {
  position: relative;
  margin: 0 auto;
  padding: clamp(27px, 5vw, 60px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 17px;
  background: linear-gradient(130deg, rgba(99, 102, 241, .09), transparent 50%), #12151a
}

main.jdg-portfolio-sections .quote-mark {
  position: absolute;
  top: 7px;
  right: 29px;
  color: rgba(173, 162, 255, .24);
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1
}

main.jdg-portfolio-sections .testimonial blockquote {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  margin: 0 0 26px;
  color: #f0f1f5;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.52;
  letter-spacing: -.018em
}

main.jdg-portfolio-sections .testimonial blockquote p {
  color: inherit
}

main.jdg-portfolio-sections .testimonial figcaption {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .095)
}

main.jdg-portfolio-sections .testimonial figcaption strong {
  color: #f2f3f6;
  font-family: var(--font-button);
  font-size: .78rem;
  font-weight: 700
}

main.jdg-portfolio-sections .testimonial figcaption span {
  color: #858c98;
  font-size: .7rem
}

/* Required 2 x 2 process cards. */
main.jdg-portfolio-sections #process .process-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections #process .process-list li {
  position: relative;
  min-height: 185px;
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 15px;
  background: linear-gradient(140deg, #181a21, #111318);
  transition: transform .2s ease, border-color .2s ease
}

main.jdg-portfolio-sections #process .process-list li::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  content: "";
  opacity: .8
}

main.jdg-portfolio-sections #process .process-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(161, 149, 255, .39)
}

main.jdg-portfolio-sections #process .process-list li>span {
  display: block;
  margin-bottom: 16px;
  color: #83dfca;
  font-family: var(--font-button);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em
}

main.jdg-portfolio-sections #process .process-list h3 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 1.45rem
}

main.jdg-portfolio-sections #process .process-list p {
  max-width: 50ch;
  color: #9da4b0;
  font-size: .8rem;
  line-height: 1.7
}

/* Booking and closing conversion panels. */
main.jdg-portfolio-sections .booking-section {
  background: radial-gradient(ellipse at 50% 70%, rgba(84, 76, 190, .08), transparent 54%)
}

main.jdg-portfolio-sections .booking-widget {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: #111319;
  box-shadow: 0 28px 75px rgba(0, 0, 0, .3)
}

main.jdg-portfolio-sections .booking-intro {
  padding: clamp(23px, 4vw, 43px);
  background: linear-gradient(145deg, rgba(101, 87, 232, .16), transparent 52%), #15171e
}

main.jdg-portfolio-sections .jdg-logo-panel {
  display: grid;
  width: min(210px, 75%);
  min-height: 56px;
  place-items: center;
  margin-bottom: 24px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: #f4f4f5
}

main.jdg-portfolio-sections .jdg-logo-panel img {
  width: 100%;
  max-height: 52px;
  object-fit: contain
}

main.jdg-portfolio-sections .booking-brand {
  margin-bottom: 5px;
  color: #69ddc1;
  font-family: var(--font-button);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .17em
}

main.jdg-portfolio-sections .booking-intro h3 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 2rem
}

main.jdg-portfolio-sections .meeting-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px
}

main.jdg-portfolio-sections .meeting-meta>span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #bdc2cb;
  font-size: .67rem
}

main.jdg-portfolio-sections .meeting-meta b {
  color: #f0f1f4;
  font-weight: 600
}

main.jdg-portfolio-sections .booking-intro>p:not(.booking-brand):not(.booking-reassurance) {
  font-size: .79rem;
  line-height: 1.7
}

main.jdg-portfolio-sections .booking-intro h4 {
  margin-top: 20px;
  margin-bottom: 8px;
  color: #f1f2f5;
  font-family: var(--font-button);
  font-size: .76rem;
  font-weight: 700
}

main.jdg-portfolio-sections .call-benefits {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none
}

main.jdg-portfolio-sections .call-benefits li {
  position: relative;
  padding-left: 18px;
  color: #aeb4bf;
  font-size: .72rem;
  line-height: 1.5
}

main.jdg-portfolio-sections .call-benefits li::before {
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  content: "\2713"
}

main.jdg-portfolio-sections .booking-reassurance {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #d3d4dc;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.55
}

/* Direct contact options, kept inside the single final call to action. */
main.jdg-portfolio-sections .booking-contact {
  margin-top: 14px;
  color: #828a96;
  font-size: .69rem;
  line-height: 1.7
}

main.jdg-portfolio-sections .booking-contact a {
  color: #c2bcff;
  text-decoration: underline;
  text-decoration-color: rgba(194, 188, 255, .35);
  text-underline-offset: 3px
}

main.jdg-portfolio-sections .booking-calendar {
  position: relative;
  min-height: 600px;
  padding: 10px;
  background: #fff
}

main.jdg-portfolio-sections .booking-calendar iframe {
  width: 100%;
  height: 100%;
  min-height: 580px;
  border: 0;
  border-radius: 9px;
  background: #fff
}

main.jdg-portfolio-sections .live-booking-fallback {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 7px 11px;
  border-radius: 7px;
  background: #17191e;
  color: #fff;
  font-size: .68rem
}

main.jdg-portfolio-sections .live-booking-fallback a {
  color: #d0cbff;
  text-decoration: underline;
  text-underline-offset: 3px
}

main.jdg-portfolio-sections .no-script {
  padding-block: 10px 18px;
  color: #858c98;
  font-size: .7rem
}

main.jdg-portfolio-sections .floating-book-call {
  position: fixed;
  z-index: 999;
  right: 22px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(19, 21, 28, .94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
  color: #f4f3ff;
  font-family: var(--font-button);
  font-size: .73rem;
  font-weight: 700;
  backdrop-filter: blur(14px);
  transition: transform .18s ease, opacity .18s ease
}

main.jdg-portfolio-sections .floating-book-call:hover {
  transform: translateY(-2px);
  border-color: rgba(164, 151, 255, .55)
}

main.jdg-portfolio-sections .floating-book-call.is-at-booking {
  opacity: .16;
  pointer-events: none
}

main.jdg-portfolio-sections .call-icon {
  color: var(--color-secondary);
  font-size: 1rem
}

main.jdg-portfolio-sections .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

@media (max-width:1100px) {
  main.jdg-portfolio-sections .container {
    width: min(var(--container-width), calc(100% - 64px))
  }

  main.jdg-portfolio-sections .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .93fr);
    gap: 32px
  }

  main.jdg-portfolio-sections .hero-dashboard {
    padding: 23px
  }

  main.jdg-portfolio-sections .trust-grid {
    grid-template-columns: 1.2fr repeat(3, minmax(95px, .62fr));
    row-gap: 14px
  }

  main.jdg-portfolio-sections .featured-case,
  main.jdg-portfolio-sections .featured-case:nth-child(even) {
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
    gap: 24px;
    padding: 24px
  }

  main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-copy {
    order: 0
  }

  main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-visual {
    order: 0
  }
}

@media (max-width:900px) {
  main.jdg-portfolio-sections .section {
    padding-block: 78px
  }

  main.jdg-portfolio-sections .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px
  }

  main.jdg-portfolio-sections .hero-copy {
    max-width: 800px
  }

  main.jdg-portfolio-sections .hero-dashboard {
    width: min(100%, 760px);
    margin-inline: auto;
    transform: none
  }

  main.jdg-portfolio-sections .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  main.jdg-portfolio-sections .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  main.jdg-portfolio-sections .comparison-shell {
    grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr)
  }

  main.jdg-portfolio-sections .campaign-cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .78fr);
    gap: 24px
  }

  main.jdg-portfolio-sections .booking-widget {
    grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr)
  }

  main.jdg-portfolio-sections .booking-calendar {
    min-height: 560px
  }

  main.jdg-portfolio-sections .booking-calendar iframe {
    min-height: 540px
  }
}

@media (max-width:680px) {
  main.jdg-portfolio-sections .container {
    width: calc(100% - 38px)
  }

  main.jdg-portfolio-sections .section {
    padding-block: 68px
  }

  main.jdg-portfolio-sections .hero {
    min-height: 0;
    padding-block: 66px 58px
  }

  main.jdg-portfolio-sections .hero-grid {
    gap: 32px
  }

  main.jdg-portfolio-sections h1 {
    font-size: clamp(3rem, 13vw, 4.8rem)
  }

  main.jdg-portfolio-sections h2 {
    font-size: clamp(2.2rem, 10vw, 3.4rem)
  }

  main.jdg-portfolio-sections .hero-description {
    font-size: .91rem
  }

  main.jdg-portfolio-sections .hero-actions {
    gap: 9px
  }

  main.jdg-portfolio-sections .hero-actions .button {
    min-height: 44px;
    padding: 11px 15px;
    font-size: .78rem
  }

  main.jdg-portfolio-sections .hero-capabilities {
    gap: 7px;
    font-size: .61rem
  }

  main.jdg-portfolio-sections .hero-dashboard {
    padding: 18px;
    border-radius: 16px
  }

  main.jdg-portfolio-sections .hero-result-number {
    font-size: 3.75rem
  }

  main.jdg-portfolio-sections .dashboard-secondary {
    gap: 7px
  }

  main.jdg-portfolio-sections .dashboard-secondary>div {
    padding: 10px
  }

  main.jdg-portfolio-sections .dashboard-secondary strong {
    font-size: .74rem
  }

  main.jdg-portfolio-sections .dashboard-footer {
    align-items: flex-start;
    flex-direction: column
  }

  main.jdg-portfolio-sections .hero-result-ribbon {
    gap: 8px
  }

  main.jdg-portfolio-sections .hero-result-ribbon>span {
    font-size: .64rem
  }

  main.jdg-portfolio-sections .hero-result-ribbon b {
    font-size: 1.2rem
  }

  main.jdg-portfolio-sections .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    padding-block: 18px
  }

  main.jdg-portfolio-sections .trust-grid>p {
    grid-column: 1/-1
  }

  main.jdg-portfolio-sections .trust-grid>div {
    padding-left: 9px
  }

  main.jdg-portfolio-sections .trust-grid>div strong {
    font-size: 1.12rem
  }

  main.jdg-portfolio-sections .trust-grid>div span {
    font-size: .59rem
  }

  main.jdg-portfolio-sections .section-heading {
    display: block;
    margin-bottom: 27px
  }

  main.jdg-portfolio-sections .section-heading>p {
    margin-top: 14px;
    font-size: .82rem
  }

  main.jdg-portfolio-sections .results-grid {
    gap: 8px
  }

  main.jdg-portfolio-sections .results-grid>a {
    min-height: 176px;
    padding: 17px 14px
  }

  main.jdg-portfolio-sections .results-grid>a>strong {
    font-size: 2.15rem
  }

  main.jdg-portfolio-sections .results-grid>a>span {
    font-size: .7rem
  }

  main.jdg-portfolio-sections .results-grid>a>small {
    font-size: .59rem
  }

  main.jdg-portfolio-sections .featured-section {
    padding-top: 28px
  }

  main.jdg-portfolio-sections .featured-case,
  main.jdg-portfolio-sections .featured-case:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 18px;
    border-radius: 15px
  }

  main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-copy {
    order: 0
  }

  main.jdg-portfolio-sections .featured-case:nth-child(even) .featured-visual {
    order: 0
  }

  main.jdg-portfolio-sections .featured-copy {
    max-width: none
  }

  main.jdg-portfolio-sections .feature-metrics {
    grid-template-columns: 1fr
  }

  main.jdg-portfolio-sections .campaign-cta {
    padding-block: 24px
  }

  main.jdg-portfolio-sections .campaign-cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 23px 19px;
    border-radius: 15px
  }

  main.jdg-portfolio-sections .campaign-cta h2 {
    font-size: clamp(2rem, 9vw, 3rem)
  }

  main.jdg-portfolio-sections .campaign-action {
    padding: 17px
  }

  main.jdg-portfolio-sections .local-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px
  }

  main.jdg-portfolio-sections .local-summary>p {
    grid-column: auto
  }

  main.jdg-portfolio-sections .local-evidence-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px
  }

  main.jdg-portfolio-sections .local-evidence-heading {
    grid-template-columns: minmax(82px, .46fr) minmax(0, 1.54fr);
    gap: 10px
  }

  main.jdg-portfolio-sections .local-image-trigger img {
    max-height: 230px
  }

  main.jdg-portfolio-sections .filter-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  main.jdg-portfolio-sections .filters {
    gap: 6px
  }

  main.jdg-portfolio-sections .filters button {
    padding: 6px 9px;
    font-size: .62rem
  }

  main.jdg-portfolio-sections .portfolio-selection {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 15px
  }

  main.jdg-portfolio-sections .portfolio-selection>p {
    font-size: .7rem
  }

  main.jdg-portfolio-sections .projects-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .project-card .proof-image-trigger img {
    max-height: 230px
  }

  main.jdg-portfolio-sections .comparison-shell {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .comparison-controls {
    gap: 9px
  }

  main.jdg-portfolio-sections .comparison-controls .text-link {
    margin-top: 2px
  }

  main.jdg-portfolio-sections .comparison-charts {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .services-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .services-grid>article {
    min-height: 0;
    padding: 19px
  }

  main.jdg-portfolio-sections .service-number {
    margin-bottom: 14px
  }

  main.jdg-portfolio-sections .industry-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px
  }

  main.jdg-portfolio-sections .industry-list {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .testimonial-navigation {
    margin-top: 18px
  }

  main.jdg-portfolio-sections .testimonial-list {
    min-height: 0
  }

  main.jdg-portfolio-sections .testimonial {
    min-height: 0;
    padding: 25px 20px
  }

  main.jdg-portfolio-sections .testimonial blockquote {
    font-size: 1.13rem
  }

  main.jdg-portfolio-sections .quote-mark {
    top: 0;
    right: 16px;
    font-size: 5rem
  }

  main.jdg-portfolio-sections #process .process-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px
  }

  main.jdg-portfolio-sections #process .process-list li {
    min-height: 0;
    padding: 20px
  }

  main.jdg-portfolio-sections .booking-widget {
    grid-template-columns: minmax(0, 1fr)
  }

  main.jdg-portfolio-sections .booking-calendar {
    min-height: 520px;
    padding: 8px
  }

  main.jdg-portfolio-sections .booking-calendar iframe {
    min-height: 500px
  }

  main.jdg-portfolio-sections .floating-book-call {
    right: 12px;
    bottom: 12px;
    padding: 9px 13px;
    font-size: .68rem
  }
}

@media (prefers-reduced-motion:reduce) {

  main.jdg-portfolio-sections *,
  main.jdg-portfolio-sections *::before,
  main.jdg-portfolio-sections *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important
  }
}
/* --- Testimonials: all four approved quotes visible in a grid ----------- */
main.jdg-portfolio-sections .testimonial-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}
main.jdg-portfolio-sections .testimonial {
  margin: 0;
  padding: clamp(22px, 2.5vw, 34px);
}
main.jdg-portfolio-sections .testimonial blockquote {
  margin-bottom: 20px;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.55;
}
main.jdg-portfolio-sections .testimonial .quote-mark { font-size: 5rem; line-height: 1; }

@media (max-width: 900px) {
  main.jdg-portfolio-sections .testimonial-list { grid-template-columns: minmax(0, 1fr); }
}
/* safety: purana carousel script chale to bhi quotes visible rahein */
main.jdg-portfolio-sections .testimonial[hidden] { display: block !important; }