/*
 * Case Studies 2025 (v2) - hand-written CSS (no SCSS build on the server).
 * Detail page: template-parts/case-study-v2.php (loaded after FED's tpl-case-study-single.css).
 * Listing:     page-templates/tpl-our-work-v2.php.
 * Breakpoints follow Bootstrap 4: sm 576, md 768, lg 992, xl 1200.
 */

/* ==========================================================================
   Shared
   ========================================================================== */
.cs2 {
  --cs2-navy: var(--ss-navy);
  --cs2-dark: var(--ss-navy-deep);
  --cs2-dark-2: var(--ss-navy-deep);
  --cs2-gold: var(--ss-gold);
  --cs2-gold-2: var(--ss-gold-end);
  --cs2-gold-grad: var(--ss-gold-grad);
  overflow: hidden;
  overflow: clip; /* clip (not hidden) so position:sticky inside still works */
}

.cs2-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.cs2-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* colour logo fallback sits on a white chip so it stays legible on dark/photo backgrounds */
.cs2-logo--color {
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.cs2-unit {
  font-size: .45em;
  font-weight: 600;
  margin-left: .12em;
  vertical-align: baseline;
}

.cs2-unit--pre {
  margin-left: 0;
  margin-right: .08em;
  font-size: .6em;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.cs2 .banner__v3.cs2-hero {
  position: relative;
  background-color: var(--cs2-dark);
  background-image: var(--ss-glow-gold), var(--ss-glow-navy); /* shared gold burst: inc/ss-glow.php */
  padding: 3rem 0 2.5rem;
}

@media (min-width: 768px) {
  .cs2 .banner__v3.cs2-hero {
    padding: 4.5rem 0 4rem;
  }
}

@media (min-width: 1200px) {
  .cs2 .banner__v3.cs2-hero {
    padding: 5.5rem 0 5rem;
  }
}

/* content-driven height: no min-height; the box image and the left column are
   centred against each other (Figma: pills > H1 > testimonial | box image). */
.cs2 .banner__v3.cs2-hero {
  min-height: 0;
}

.cs2-hero__grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "head" "media" "details";
  row-gap: 1.75rem;
}

/* mobile (hero "Option B"): pills + H1, stats, quote, then the box image as a 16:10 crop */
.cs2-hero__left {
  display: contents;
}

@media (max-width: 991.98px) {
  .cs2-hero__grid {
    grid-template-areas: "head" "details" "metas" "media";
  }

  .cs2-hero__box {
    max-width: 560px;
  }

  .cs2 .cs2-hero__box > img,
  .cs2 .cs2-hero__box--empty {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

@media (min-width: 992px) {
  .cs2-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "left media";
    column-gap: 3.5rem;
    align-items: center;
  }

  .cs2-hero__left {
    display: block;
    grid-area: left;
  }

  .cs2-hero__details {
    margin-top: 2.5rem;
  }
}

.cs2-hero__head {
  grid-area: head;
}

.cs2-hero__media {
  grid-area: media;
  position: relative;
  z-index: 2;
}

.cs2-hero__details {
  grid-area: details;
}

.cs2 .banner__v3 .cat li {
  color: rgba(255, 255, 255, .85);
}

.cs2 .banner__v3 .cat li .icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma: Proxima Nova Medium 70/74, -0.7px tracking (1440 frame) */
.cs2 .banner__v3 h1 {
  color: #fff;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-size: 2.25rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .cs2 .banner__v3 h1 {
    font-size: 3.4rem;
  }
}

@media (min-width: 1200px) {
  .cs2 .banner__v3 h1 {
    font-size: 4.375rem;
    line-height: 1.057;
  }
}

.cs2 .banner__v3 .cat {
  margin-bottom: 20px;
}

/* testimonial: 92px avatar with gold ring, gold stars, semibold italic 24/36 quote */
.cs2 .banner__v3 .review {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
}

.cs2 .banner__v3 .review .headshot {
  flex: 0 0 64px;
}

.cs2 .banner__v3 .review .content {
  flex: 1 1 auto;
  width: auto;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
}

@media (min-width: 1200px) {
  .cs2 .banner__v3 .review {
    gap: 25px;
  }

  .cs2 .banner__v3 .review .headshot {
    flex-basis: 92px;
    width: 92px;
  }

  .cs2 .banner__v3 .review .content {
    font-size: 24px;
  }
}

/* hero meta strip: Industry / Category / Audience / Objective (subtle) */
.cs2 .banner__v3 .cs2-hero__metas {
  grid-area: metas;
  width: 100%;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.cs2 .banner__v3 .cs2-hero__metas ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .cs2 .banner__v3 .cs2-hero__metas ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs2 .banner__v3 .cs2-hero__metas strong {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* hero "Option B": stats row always, then a small testimonial line */
.cs2-hero-quote {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  max-width: 600px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.cs2-hero-quote--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cs2-hero-quote__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1.5px solid var(--ss-gold);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ss-navy), var(--ss-ink));
  color: var(--ss-gold);
  font-size: 14px;
  font-weight: 800;
}

.cs2-hero-quote__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs2 .cs2-hero-quote .stars {
  display: flex;
  gap: 3px;
  margin: 0 0 5px;
  padding: 0;
  list-style: none;
  line-height: 0;
}

.cs2 .cs2-hero-quote .stars svg {
  width: 12px;
  height: 12px;
}

.cs2 .cs2-hero-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ss-snow);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.5;
}

.cs2-hero-quote figcaption {
  margin-top: 5px;
  color: var(--ss-mist);
  font-size: 12.5px;
}

.cs2-hero-quote figcaption b {
  color: var(--ss-snow);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .cs2 .cs2-hero-quote blockquote {
    font-size: 16px;
  }
}

/* hero stats row */
.cs2-hero-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
}

.cs2-hero-stats li {
  flex: 0 1 auto;
  max-width: 190px;
}

.cs2-hero-stats__value {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--ss-gold);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.cs2-hero-stats__value .cs2-unit {
  font-size: 1em;
  margin-left: 0;
}

.cs2-hero-stats__value .cs2-stat-up {
  flex-basis: 17px;
  width: 17px;
  height: 12px;
  margin-right: 8px;
}

.cs2-hero-stats__label {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .cs2-hero-stats__value {
    font-size: 40px;
  }

  .cs2-hero-stats__label {
    font-size: 16px;
  }
}

.cs2 .banner__v3 .review--no-photo .content {
  width: 100%;
}

.cs2 .banner__v3 .review .stars li {
  line-height: 0;
}

.cs2 .banner__v3 .review .stars svg {
  width: 18px;
  height: 18px;
}

.cs2-hero__box {
  max-width: 460px;
  margin: 0 auto !important;
}

@media (min-width: 992px) {
  .cs2-hero__box {
    margin: 0 0 0 auto !important;
  }
}

.cs2-hero__box > img {
  display: block;
  aspect-ratio: 290 / 350;
  object-fit: cover;
  object-position: center;
}

.cs2-hero__box--empty {
  aspect-ratio: 290 / 350;
  background: linear-gradient(160deg, var(--ss-navy), var(--ss-navy-deep));
}

.cs2-hero__logo {
  position: absolute;
  z-index: 3;
  top: 2.1rem;
  left: 2.1rem;
  max-width: 45%;
  height: 56px;
}

@media (min-width: 1200px) {
  .cs2-hero__logo {
    top: 2.8rem;
    left: 2.8rem;
    height: 70px;
  }
}

.cs2-hero__logo img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}

.cs2-hero__logo.cs2-logo--color img {
  filter: none;
}

/* ==========================================================================
   About | Challenge (white, two columns with a divider - Mike reverted the June-4 cards)
   ========================================================================== */
.cs2-intro {
  padding: 50px 0 30px;
  background: #fff;
  color: var(--ss-ink);
}

@media (min-width: 992px) {
  .cs2-intro {
    padding: 90px 0 70px;
  }
}

@media (min-width: 1200px) {
  .cs2-intro .container {
    max-width: 1180px;
  }
}

.cs2-intro__col {
  margin-bottom: 30px;
}

.cs2 .cs2-intro h2 {
  color: var(--cs2-navy);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 14px;
}

@media (min-width: 1200px) {
  .cs2 .cs2-intro h2 {
    font-size: 2rem;
  }
}

@media (min-width: 992px) {
  .cs2-intro__col {
    margin-bottom: 0;
  }

  .cs2-intro__col--right {
    border-left: 1px solid rgba(var(--ss-navy-rgb),.1);
    padding-left: 45px;
  }

  .cs2-intro .col-lg-6:first-child {
    padding-right: 45px;
  }
}

.cs2-intro__more {
  margin-top: 26px;
  text-align: center;
}

.cs2-intro__more[hidden] {
  display: none;
}

/* About + Challenge share one clamp height (~7 lines); a fade marks cut text.
   ONE "Show More" under the row expands both (JS animates max-height). */
.cs2-clamp {
  position: relative;
  color: var(--ss-ink);
  font-size: 15px;
  line-height: 1.85;
}

.cs2-clamp__inner {
  max-height: 11em;
  overflow: hidden;
  transition: max-height .4s ease;
}

/* fade-out of the cut text into the white background */
.cs2-clamp.is-clamped .cs2-clamp__inner {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cs2-clamp__inner {
    transition: none;
  }
}

.cs2-clamp p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.cs2-clamp p + p {
  margin-top: 1rem;
}

.cs2-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 28px;
  border: 1.5px solid var(--ss-gold);
  border-radius: 49px;
  background: #fff;
  color: var(--cs2-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.cs2-more:after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--ss-gold-deep);
  border-bottom: 2px solid var(--ss-gold-deep);
  transform: rotate(45deg);
  transition: transform .3s ease;
}

.cs2-more[aria-expanded="true"]:after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.cs2-more:hover,
.cs2-more:focus {
  background: var(--ss-gold-soft);
  color: var(--cs2-navy);
  outline: none;
}

.cs2-more:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb),.45);
}

/* ==========================================================================
   Solutions: service blocks (zig-zag)
   ========================================================================== */
.cs2 .cat-section.with-bg.cs2-services {
  position: relative;
  background-color: var(--ss-navy-deep);
  background-image:
    radial-gradient(ellipse 45% 12% at 60% 8%, rgba(var(--ss-gold-rgb),.10), rgba(var(--ss-gold-rgb),0) 70%),
    radial-gradient(ellipse 30% 14% at 100% 40%, rgba(var(--ss-gold-rgb),.14), rgba(var(--ss-gold-rgb),0) 70%),
    radial-gradient(ellipse 35% 16% at 100% 100%, rgba(var(--ss-gold-rgb),.20), rgba(var(--ss-gold-rgb),0) 70%),
    linear-gradient(180deg, var(--ss-navy-deep) 0%, var(--ss-navy-deep) 100%);
  padding: 40px 0 60px;
}

@media (min-width: 992px) {
  .cs2 .cat-section.with-bg.cs2-services {
    padding: 60px 0 100px;
  }
}

.cs2 .cs2-solutions-title {
  margin: 0 0 40px;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance; /* "How we helped <brand>" wraps evenly on long names */
}

@media (min-width: 992px) {
  .cs2 .cs2-solutions-title {
    font-size: 44px;
    margin-bottom: 90px;
  }
}

.cs2 .cat-section.with-bg .cs2-solutions-title + .block {
  margin-top: 0;
}

.cs2-block .cat {
  font-size: 14px;
  padding: 5px 12px 4px;
  min-width: 52px;
  margin-bottom: 16px;
  color: var(--ss-navy);
  background-image: var(--ss-gold-grad);
  border: 1px solid var(--ss-gold);
  border-radius: 60px;
}

.cs2 .cs2-block h2 {
  color: #fff;
  font-weight: 600;
  line-height: 1.22;
  margin-bottom: 16px;
}

@media (min-width: 1200px) {
  .cs2 .cs2-block h2 {
    font-size: 36px;
  }
}

.cs2-block__intro {
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 8px;
}

@media (min-width: 1200px) {
  .cs2-block__intro {
    font-size: 18px;
  }
}

.cs2-block .check-list li {
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.cs2-block .check-list li strong {
  color: #fff;
  font-weight: 600;
}

@media (min-width: 768px) {
  .cs2-block .check-list {
    padding-top: 12px;
  }

  .cs2-block .check-list li {
    font-size: 16px;
  }

  .cs2-block .check-list li:not(:last-child) {
    margin-bottom: 12px;
  }
}

.cs2 .cat-section.with-bg .cs2-light {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 28px 0 0;
  padding: 12px 16px 12px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: var(--ss-snow);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

@media (min-width: 768px) {
  .cs2 .cat-section.with-bg .cs2-light {
    font-size: 15px;
    padding: 12px 18px 12px 14px;
  }
}

.cs2 .cs2-light .icon {
  position: static;
  flex: none;
  width: 36px;
  height: 36px;
  transform: none;
  border: 0;
  background: #fff;
  line-height: 0;
  box-shadow: 0 0 22px rgba(var(--ss-gold-rgb),.55);
}

.cs2-light .icon svg {
  width: 100%;
  height: 100%;
}

/* mobile: graphic goes after the text */
.cs2-block__visual {
  margin-top: 40px;
}

@media (min-width: 992px) {
  .cs2-block__visual {
    margin-top: 0;
  }
}

/* --- stats row (all services) ------------------------------------------------ */
.cs2-inline-stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
}

.cs2-inline-stats li {
  flex: 1 1 0;
  min-width: min-content; /* never narrower than the number: wrap to a new row instead */
  max-width: 170px;
}

@media (max-width: 575.98px) {
  .cs2-inline-stats {
    gap: 18px 12px;
  }

  .cs2-inline-stats li {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 0;
  }
}

@media (min-width: 1200px) {
  .cs2-inline-stats {
    gap: 24px 26px;
  }
}

.cs2-inline-stats__value {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--ss-gold);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.cs2-stat-up {
  flex: 0 0 15px;
  width: 15px;
  height: 11px;
  margin-right: 6px;
}

.cs2-inline-stats__value .cs2-unit {
  font-size: 1em;
  font-weight: 600;
  margin-left: 0;
}

.cs2-inline-stats__value .cs2-unit--pre {
  margin-right: 0;
}

.cs2-inline-stats__label {
  display: block;
  margin-top: 6px;
  color: var(--ss-mist);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

@media (min-width: 1200px) {
  .cs2-inline-stats__value {
    font-size: 34px;
  }

  .cs2-inline-stats--n4 .cs2-inline-stats__value,
  .cs2-inline-stats--n5 .cs2-inline-stats__value,
  .cs2-inline-stats--n6 .cs2-inline-stats__value {
    font-size: 28px;
  }

  .cs2-inline-stats__label {
    font-size: 14px;
  }
}

/* ==========================================================================
   Service graphics. Each .cs2-gfx is a fixed-proportion stage laid out in
   Figma design px; --u = one design px, scaled to the stage's width.
   ========================================================================== */
.cs2-gfx {
  --u: 1px;
  position: relative;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

.cs2-gfx--seo { max-width: 482px; aspect-ratio: 482 / 617; }
.cs2-gfx--em  { max-width: 540px; aspect-ratio: 540 / 660; }
.cs2-gfx--sm  { max-width: 511px; aspect-ratio: 511 / 633; }

@supports (width: 1cqw) {
  .cs2-gfx--seo { --u: calc(100cqw / 482); }
  .cs2-gfx--em  { --u: calc(100cqw / 540); }
  .cs2-gfx--sm  { --u: calc(100cqw / 511); }
}

/* phone frame (Figma: 311 x 617, 7.655px #748490 border, 30.6px radius) */
.cs2-device {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: calc(7.655 * var(--u)) solid #748490;
  border-radius: calc(30.6 * var(--u));
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.cs2-device__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cs2-gfx__panel {
  position: absolute;
  z-index: 0;
  border-radius: 32px;
  background: var(--ss-navy-deep);
}

/* --- SEO: map + chips ------------------------------------------------------- */
.cs2-device--map {
  left: 19.29%;
  top: 0;
  width: 64.52%;
  height: 100%;
}

.cs2-device--map .cs2-device__media {
  object-position: center center;
}

/* brand label next to the pin baked into the map (pin tip ~ 49% / 57.6%) */
.cs2-map-label {
  position: absolute;
  left: 53.2%;
  top: 54.1%;
  max-width: 44%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #c5221f;
  font-family: Roboto, Arial, sans-serif;
  font-size: calc(10.5 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}

.cs2-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  max-width: 100%;
  height: calc(53 * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(21 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--ss-gold);
  border-radius: 49px;
  background: var(--ss-ink);
  color: #fff;
  font-size: calc(18 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.cs2-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs2-chip img {
  flex: 0 0 auto;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}

.cs2-chip--1 {
  left: 0;
  top: 15.07%;
  max-width: 64%;
  box-shadow: 0 0 8px rgba(var(--ss-gold-rgb),.6), 0 6px 12px rgba(0, 0, 0, .1);
}

.cs2-chip--2 {
  right: 0;
  top: 41.49%;
  max-width: 92%;
  border-color: #9a2af2;
  box-shadow: 0 0 16px rgba(154, 42, 242, .75), 0 6px 12px rgba(0, 0, 0, .1);
}

.cs2-chip--3 {
  left: 8.3%;
  top: 72.45%;
  max-width: 88%;
  border-color: #e64135;
  box-shadow: 0 0 15px var(--ss-gold-end), 0 6px 12px rgba(0, 0, 0, .1);
}

/* --- PPC: tilted desktop ad card (Option C) --------------------------------- */
.cs2-gfx--ppc {
  max-width: 560px;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 30px 10px 70px;
}

.cs2-adglow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  max-width: 90%;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--ss-gold-rgb),.28), transparent);
  filter: blur(24px);
  pointer-events: none;
}

.cs2-adcard {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  padding: 22px 24px 20px;
  border-radius: 16px;
  background: #fff;
  color: #202124;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  transform: rotate(-4deg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .4), 0 0 60px rgba(var(--ss-gold-rgb),.18);
}

.cs2-adcard__browser {
  display: flex;
  gap: 6px;
  margin: -8px 0 14px;
}

.cs2-adcard__browser i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2e5ea;
}

.cs2-adcard__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid #dfe1e5;
  border-radius: 22px;
  box-shadow: 0 1px 4px rgba(32, 33, 36, .18);
  font-size: 12.5px;
  line-height: 1.2;
}

.cs2-adcard__search svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.cs2-adcard__query {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs2-adcard__mic {
  flex: none;
  width: 9px;
  height: auto;
}

.cs2 .cs2-adcard__sponsored {
  margin: 0 0 8px;
  color: #202124;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.cs2-adcard__site {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs2-adcard__site > svg {
  flex: none;
  width: 3px;
  height: 13px;
  margin-left: auto;
}

.cs2-adcard__fav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: var(--ss-navy);
  font: 800 10px/1 Arial, sans-serif;
}

.cs2-adcard__fav--dark {
  background: #101c33;
}

.cs2-adcard__fav img {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}

.cs2-adcard__who {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
}

.cs2-adcard__name {
  display: block;
  color: #202124;
}

.cs2-adcard__who small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4d5156;
  font-size: 10px;
}

.cs2 .cs2-adcard__headline {
  margin: 8px 0 4px;
  color: #b07d00;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.cs2 .cs2-adcard__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: #4d5156;
  font-size: 12.5px;
  line-height: 1.45;
}

.cs2-adcard__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.cs2-adcard__links > div {
  min-width: 0;
}

.cs2-adcard__links b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a0dab;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
}

.cs2-adcard__links span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4d5156;
  font-size: 11.5px;
  line-height: 1.35;
}

.cs2-adchip {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 9px 16px;
  overflow: hidden;
  border: 1.5px solid var(--ss-gold);
  border-radius: 999px;
  background: #0f1a2e;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

.cs2-adchip img {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (max-width: 575.98px) {
  .cs2-gfx--ppc {
    padding: 16px 4px 64px;
  }

  .cs2-adcard {
    padding: 18px 16px 16px;
    transform: rotate(-3deg);
  }

  .cs2 .cs2-adcard__headline {
    font-size: 17px;
  }

  .cs2-adcard__links {
    gap: 10px 14px;
  }
}

/* --- EM: email phone ------------------------------------------------------- */
.cs2-gfx--em .cs2-gfx__panel {
  left: 8%;
  top: 9%;
  width: 78%;
  height: 84%;
}

.cs2-device--em {
  left: 21.2%;
  top: 3%;
  width: 57.6%;
  height: 94%;
}

/* --- SM: profile phone + post card + social icons --------------------------- */
.cs2-gfx--sm .cs2-gfx__panel {
  left: 0;
  top: 8.06%;
  width: 81.8%;
  height: 88.3%;
}

.cs2-device--sm {
  left: 37.89%;
  top: 0;
  width: 60.9%;
  height: 100%;
}

.cs2-igpost {
  position: absolute;
  z-index: 2;
  left: 5.87%;
  top: 22.43%;
  width: 54.99%;
  height: 62.15%;
  border-radius: calc(8.5 * var(--u));
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.cs2-igpost__img {
  position: absolute;
  left: 3.4%;
  right: 3.02%;
  top: 2.7%;
  bottom: 13.75%;
  border-radius: calc(8.5 * var(--u));
  background: linear-gradient(135deg, var(--ss-snow), var(--ss-line-strong)) center / cover no-repeat;
}

.cs2-igpost__bar {
  position: absolute;
  left: 3.4%;
  right: 3.02%;
  top: 88.95%;
  bottom: 3.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs2-igpost__left {
  display: flex;
  gap: calc(8 * var(--u));
}

.cs2-igpost__bar img {
  width: calc(25.4 * var(--u));
  height: calc(25.4 * var(--u));
}

.cs2-igpost__bar .cs2-igpost__dots {
  width: calc(38 * var(--u));
  height: calc(6.4 * var(--u));
}

.cs2-social {
  position: absolute;
  z-index: 3;
  left: 53.62%;
  top: 26.07%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.cs2-social li {
  position: relative;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  line-height: 0;
}

.cs2-social img {
  width: 100%;
  height: 100%;
}

/* the Instagram SVG carries its drop shadow: 82x82 canvas around a 54px circle */
.cs2-social__instagram img {
  position: absolute;
  left: calc(-14 * var(--u));
  top: calc(-10 * var(--u));
  width: calc(82 * var(--u));
  height: calc(82 * var(--u));
  max-width: none;
}

.cs2-social__tiktok img {
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, .35);
}

/* --- generic phone screens (no client video / graphic) ---------------------- */
.cs2-device .cs2-phone__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  padding: calc(20 * var(--u)) calc(16 * var(--u));
  text-align: left;
}

.cs2-phone__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: calc(14 * var(--u));
  min-height: 34px;
}

.cs2-phone__logo {
  height: 30px;
  max-width: 90px;
}

.cs2-phone__logo.cs2-logo--white,
.cs2-ig__logo.cs2-logo--white {
  background: var(--cs2-navy);
  border-radius: 6px;
  padding: 4px 6px;
}

.cs2-phone__logo.cs2-logo--color,
.cs2-ig__logo.cs2-logo--color {
  box-shadow: none;
  padding: 0;
}

.cs2-phone__brand {
  color: var(--cs2-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.cs2-phone__img {
  height: calc(190 * var(--u));
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  margin-bottom: calc(18 * var(--u));
}

.cs2-phone__img--empty {
  background: linear-gradient(135deg, var(--ss-snow), var(--ss-line-strong));
}

.cs2-phone__line {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: var(--ss-line);
  margin-bottom: calc(11 * var(--u));
}

.cs2-phone__line--w90 { width: 90%; }
.cs2-phone__line--w80 { width: 80%; }
.cs2-phone__line--w70 { width: 70%; }
.cs2-phone__line--w60 { width: 60%; }

.cs2-phone__btn {
  display: block;
  width: 70%;
  height: calc(30 * var(--u));
  margin: calc(18 * var(--u)) auto calc(20 * var(--u));
  border-radius: 6px;
  background: var(--cs2-gold-grad);
}

/* SM phone: Instagram-style profile header + client media (video / graphic / box-image grid) */
.cs2-ig {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ss-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left;
}

.cs2-ig__bar {
  position: relative;
  flex: 0 0 auto;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
  text-align: center;
}

.cs2-ig__back {
  position: absolute;
  left: calc(18 * var(--u));
  top: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-top: calc(-3 * var(--u));
  border-left: 2px solid var(--ss-ink);
  border-bottom: 2px solid var(--ss-ink);
  transform: rotate(45deg);
}

.cs2-ig__handle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 calc(24 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.cs2-ig__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)) 0;
}

.cs2-ig__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  overflow: hidden;
  border-radius: 50%;
  background: var(--ss-ink);
}

.cs2-ig__logo {
  height: calc(34 * var(--u));
  max-width: 80%;
}

.cs2-ig__logo.cs2-logo--color {
  box-shadow: none;
  padding: 2px;
}

.cs2-ig__logo.cs2-wordmark {
  height: auto;
  max-width: 88%;
  padding: 2px 3px;
  border: 0;
  background: none;
  box-shadow: none;
}

.cs2-ig__logo.cs2-wordmark .cs2-wordmark__text {
  font-size: calc(8 * var(--u));
  letter-spacing: .04em;
  text-align: center;
}

.cs2-ig__counts {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.cs2-ig__counts > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 * var(--u));
  color: #262626;
  font-size: calc(10.5 * var(--u));
  line-height: 1;
}

.cs2-ig__counts i {
  display: block;
  width: calc(24 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 4px;
  background: #dfe3e8;
}

.cs2 .cs2-ig__name {
  flex: 0 0 auto;
  margin: 0;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ss-ink);
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}

.cs2-ig__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid #efefef;
}

.cs2-ig__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.cs2-ig__grid span {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8edf2, #c9d3dc) center / cover no-repeat;
}

.cs2-ig__grid span:nth-child(3n+2) {
  background-position: left center;
}

.cs2-ig__grid span:nth-child(3n) {
  background-position: right center;
}

/* ==========================================================================
   Meeting CTA
   ========================================================================== */
.cs2-meeting .expert-company {
  margin-top: 30px;
}

.cs2-meeting .expert-company__img {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.cs2-meeting .expert-company__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* ==========================================================================
   Testimonial band
   ========================================================================== */
.cs2 .owner-review.cs2-review {
  background-color: var(--cs2-dark);
  background-image: var(--ss-glow-gold-soft), var(--ss-glow-band-navy); /* band keeps the navy gradient */
}

/* quote card + speech tail in one solid colour (12% white over the band's navy): the legacy card is a faded
   gradient and the tail a separate rotated-border triangle at another opacity. Solid, not translucent, so the
   tail can tuck 1px under the card without a lighter overlap line or an anti-aliased seam where they meet */
.cs2-review .rev:before {
  background: var(--ss-navy-line);
  opacity: 1;
}

.cs2-review .rev:after {
  top: 1px;
  left: 50%;
  width: 28px;
  height: 16px;
  border: 0;
  background: var(--ss-navy-line);
  opacity: 1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translate(-50%, -100%);
}

@media (min-width: 992px) {
  .cs2-review .rev:after {
    top: 50%;
    left: 1px;
    width: 38px;
    height: 64px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    transform: translate(-100%, -50%);
  }
}

.cs2-review .headshot .hs {
  object-fit: cover;
}

.cs2-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cs2-navy);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 1px;
}

.cs2-review .headshot .auth {
  text-align: center;
  font-size: 20px;
}

.cs2-review__logo {
  height: 48px;
  max-width: 180px;
}

.cs2-review .stars li {
  line-height: 0;
}

.cs2-review .stars svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 992px) {
  .cs2-review .stars svg {
    width: 40px;
    height: 40px;
  }
}

/* stars in the gold gradient + soft glow of the H1 highlight (Mike 2026-09-28); the gradient def sits right after <main> */
.cs2 .stars svg path {
  fill: url(#cs2-star-grad);
}

.cs2-review .stars svg {
  filter: drop-shadow(0 0 7px rgba(var(--ss-gold-rgb),.45));
}

.cs2-review--long .rev {
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .cs2-review--long .rev {
    font-size: 17px;
    line-height: 1.65;
  }
}

@media (min-width: 1500px) {
  .cs2-review--long .rev {
    font-size: 19px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Related slider
   ========================================================================== */
.cs2-related {
  margin: 60px 0;
}

.cs2-related .slider:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}

.cs2-related .slider:not(.slick-initialized) .slider-item {
  flex: 0 0 290px;
}

.cs2-related .slider-item .holder picture {
  display: block;
  aspect-ratio: 290 / 350;
  background: var(--ss-navy);
}

.cs2-related .slider-item .holder:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cs2-related .slider-item .holder a.caption {
  z-index: 2;
  align-items: flex-start;
  font-size: 18px;
}

.cs2-card-logo {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  height: 40px;
  max-width: 55%;
  pointer-events: none;
}

.cs2-card-logo img {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

.cs2-card-logo.cs2-logo--color img {
  filter: none;
}

/* ==========================================================================
   Our Work v2 listing
   ========================================================================== */
.cs2-work {
  --cs2-navy: var(--ss-navy);
  --cs2-gold: var(--ss-gold);
  background: #fff;
}

.cs2-work__wrap {
  padding: 0;
}

.cs2-work__sidebar {
  background: var(--ss-ground);
  border-right: 1px solid var(--ss-ground);
}

.cs2-filters {
  padding: 20px 16px;
}

@media (min-width: 992px) {
  .cs2-filters {
    position: sticky;
    top: 90px;
    padding: 50px 22px 50px 30px;
    max-width: 380px;
    margin-left: auto;
  }
}

@media (min-width: 1500px) {
  .cs2-filters {
    padding: 60px 24px 60px 40px;
  }
}

.cs2-filters__toggle {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cs2-navy);
  font-weight: 600;
  text-align: left;
}

.cs2-filters__toggle:after {
  content: "";
  float: right;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-right: 2px solid var(--cs2-navy);
  border-bottom: 2px solid var(--cs2-navy);
  transform: rotate(45deg);
  transition: transform .2s;
}

.cs2-filters-open .cs2-filters__toggle:after {
  transform: rotate(-135deg);
  margin-top: 9px;
}

@media (max-width: 991.98px) {
  .cs2-filters__body {
    display: none;
    padding-top: 10px;
  }

  .cs2-filters-open .cs2-filters__body {
    display: block;
  }
}

.cs2-filters__group + .cs2-filters__group {
  margin-top: 26px;
}

.cs2-filters__title {
  color: var(--ss-ink);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 12px 14px;
}

.cs2-services-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 991.98px) {
  .cs2-services-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cs2-services-nav li + li {
    margin-top: 0 !important;
  }
}

.cs2-services-nav li + li {
  margin-top: 10px;
}

.cs2-service-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 12px 22px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cs2-navy);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

@media (max-width: 991.98px) {
  .cs2-service-btn {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 14px;
    gap: 8px;
  }
}

.cs2-service-btn:hover,
.cs2-service-btn:focus {
  color: var(--cs2-navy);
  border-color: var(--ss-gold-pale);
  outline: none;
}

.cs2-service-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb),.45);
}

.cs2-service-btn.is-active {
  background: var(--ss-gold-soft);
  border-color: var(--ss-gold-pale);
}

.cs2-service-btn__icon {
  flex: 0 0 30px;
  line-height: 0;
}

.cs2-service-btn__icon svg {
  width: 30px;
  height: 30px;
}

.cs2-service-btn__icon svg [stroke] {
  stroke: var(--cs2-navy);
}

.cs2-service-btn__icon svg [fill]:not([fill="none"]) {
  fill: var(--cs2-navy);
}

.cs2-industry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: #fff;
}

.cs2-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  color: var(--ss-ink-2);
  font-size: 15px;
  cursor: pointer;
}

.cs2-radio input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--ss-on-navy);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.cs2-radio input:checked {
  border: 5px solid var(--cs2-gold);
}

.cs2-radio input:focus-visible {
  outline: 2px solid var(--cs2-gold);
  outline-offset: 2px;
}

.cs2-select {
  position: relative;
}

.cs2-select:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 1.5px solid var(--ss-ink-2);
  border-bottom: 1.5px solid var(--ss-ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}

.cs2-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 52px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ss-ink-2);
  font-size: 15px;
}

.cs2-work__content {
  padding: 24px 16px 50px;
}

@media (min-width: 992px) {
  .cs2-work__content {
    padding: 50px 30px 80px;
  }
}

@media (min-width: 1500px) {
  .cs2-work__content {
    padding: 60px 70px 90px 30px;
    max-width: 1160px;
  }
}

.cs2-work__heading {
  color: var(--ss-ink);
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 22px;
}

@media (min-width: 768px) {
  .cs2-work__heading {
    font-size: 40px;
  }
}

@media (min-width: 1200px) {
  .cs2-work__heading {
    font-size: 48px;
  }
}

.cs2-cards {
  margin-left: -10px;
  margin-right: -10px;
}

.cs2-cards__col {
  padding: 0 10px;
  margin-bottom: 20px;
}

.cs2-cards__col[hidden] {
  display: none !important;
}

.cs2-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 290 / 350;
  border-radius: 10px;
  background: var(--ss-navy);
  color: #fff;
  text-decoration: none !important;
  isolation: isolate;
}

.cs2-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  transition: transform .3s ease-out;
}

.cs2-card:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  z-index: -1;
}

/* hover (Mike: variant B): slight image zoom + the caption slides up to reveal "Read the case study ->"
   (rules under "Card hover" at the end of this file); keyboard focus = gold outline + halo */
.cs2-card:hover .cs2-card__img,
.cs2-card:focus-visible .cs2-card__img {
  transform: scale(1.03);
}

.cs2-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ss-gold), 0 0 24px rgba(var(--ss-gold-rgb),.35);
}

.cs2-card__headline {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

@media (min-width: 1500px) {
  .cs2-card__headline {
    font-size: 19px;
  }
}

.cs2-card__status {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--ss-bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cs2-work__more {
  text-align: center;
  margin-top: 10px;
}

.cs2-work__empty {
  padding: 30px 0;
  color: var(--ss-ink-2);
  font-size: 17px;
}

.cs2-work__empty .btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cs2-navy);
  font-weight: 600;
  text-decoration: underline;
}

.cs2-work__row {
  margin-left: 0;
  margin-right: 0;
}

.cs2-work__row > .cs2-work__sidebar {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Large screens: the theme scales its type up from 1500/1800px (body 24px at 1920)
   ========================================================================== */
@media (min-width: 1500px) {
  .cs2-block .check-list li {
    font-size: 17px;
  }

  .cs2-service-btn {
    font-size: 19px;
  }

  .cs2-radio,
  .cs2-select select {
    font-size: 17px;
  }

  .cs2-filters__title {
    font-size: 21px;
  }

  .cs2-work__heading {
    font-size: 54px;
  }
}

@media (min-width: 1800px) {
  .cs2-block__intro,
  .cs2-clamp {
    font-size: 19px;
  }

  .cs2-block .check-list li,
  .cs2 .cat-section.with-bg .cs2-light {
    font-size: 18px;
  }

  .cs2-filters {
    max-width: 440px;
  }

  .cs2-service-btn {
    font-size: 22px;
    min-height: 78px;
  }

  .cs2-service-btn__icon svg {
    width: 34px;
    height: 34px;
  }

  .cs2-radio,
  .cs2-select select {
    font-size: 19px;
  }

  .cs2-filters__title {
    font-size: 24px;
  }

  .cs2-work__heading {
    font-size: 62px;
  }

  .cs2-work__content {
    max-width: 1400px;
  }

  .cs2-card__headline {
    font-size: 23px;
  }
}

/* ==========================================================================
   Text wordmark (no white or colour logo): brand name in the logo's slot
   ========================================================================== */
.cs2-logo.cs2-wordmark {
  display: inline-block;
  height: auto;
  max-width: 62%;
  line-height: 1;
  padding: 8px 12px 8px 11px;
  border-left: 2px solid var(--ss-gold);
  border-radius: 0 6px 6px 0;
  background: rgba(var(--ss-navy-deep-rgb),.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

.cs2-wordmark__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.cs2-hero__logo.cs2-wordmark .cs2-wordmark__text {
  font-size: 13px;
}

@media (min-width: 1200px) {
  .cs2-hero__logo.cs2-wordmark {
    padding: 10px 14px 10px 13px;
  }

  .cs2-hero__logo.cs2-wordmark .cs2-wordmark__text {
    font-size: 15px;
  }
}

@media (min-width: 1800px) {
  .cs2-hero__logo.cs2-wordmark .cs2-wordmark__text {
    font-size: 17px;
  }

  .cs2-card-logo.cs2-wordmark .cs2-wordmark__text {
    font-size: 14px;
  }
}

/* Sticky filter sidebar: .site-wrapper is overflow:hidden site-wide, which turns it into the
   scroll container and defeats position:sticky. On the listing page keep horizontal clipping
   (clip does not create a scroll container) but let vertical overflow through. */
body.page-template-tpl-our-work-v2 .site-wrapper {
  overflow: visible;
  overflow-x: clip;
}
@media (min-width: 992px) {
  body.page-template-tpl-our-work-v2 .cs2-work__sidebar {
    align-self: stretch;
  }
  body.page-template-tpl-our-work-v2 .cs2-filters {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}

/* hero stats on phones: 3-up grid (hero "Option B" mobile) */
@media (max-width: 575.98px) {
  .cs2-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .cs2-hero-stats__value {
    font-size: 24px;
  }

  .cs2-hero-stats__value .cs2-stat-up {
    flex-basis: 12px;
    width: 12px;
    height: 9px;
    margin-right: 5px;
  }

  .cs2-hero-stats__label {
    font-size: 12px;
  }
}

/* EM with a client video: the (square) video already shows the email/phone mockups, so no second frame */
.cs2-gfx--em.has-video {
  aspect-ratio: 1 / 1;
}

.cs2-gfx--em.has-video .cs2-gfx__panel {
  display: none;
}

.cs2-gfx__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--ss-gold-rgb),.15);
  border-radius: 24px;
  background: var(--ss-navy-deep);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.cs2-gfx__video .cs2-device__media {
  object-position: center;
}

/* SM reels (9:16) fill the phone screen */
.cs2-device--sm video.cs2-device__media {
  object-position: center;
}

@media (min-width: 1500px) {
  .cs2-clamp {
    font-size: 17px;
  }
}

/* ==========================================================================
   SEO graphic, NATIONAL cases (Mike: "Option B - Dot-matrix USA", no map pins)
   Same stage / phone / chips as the local map phone; sizes in --u design px.
   ========================================================================== */
.cs2-device--usa {
  left: 19.29%;
  top: 0;
  width: 64.52%;
  height: 100%;
  background: #eef1f5;
}

.cs2-usa {
  position: absolute;
  inset: 0;
  color: #202124;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}

.cs2-usa__search {
  position: absolute;
  top: calc(40 * var(--u));
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border: 1px solid #dfe1e5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(32, 33, 36, .18);
  font-size: calc(12.5 * var(--u));
  line-height: 1.2;
}

.cs2-usa__search svg {
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.cs2-usa__search span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs2-usa__search img {
  flex: none;
  width: calc(8 * var(--u));
  height: auto;
}

.cs2-usa__tag {
  position: absolute;
  top: calc(92 * var(--u));
  left: calc(14 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
  border: 1px solid var(--ss-gold);
  border-radius: 999px;
  background: #101c33;
  color: var(--ss-gold);
  font-size: calc(9.5 * var(--u));
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(16, 28, 51, .25);
}

.cs2-usa__tag img {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}

.cs2-usa__map {
  position: absolute;
  top: calc(160 * var(--u));
  left: calc(6 * var(--u));
  right: calc(6 * var(--u));
  aspect-ratio: 264 / 150;
}

.cs2-usa__map > img {
  display: block;
  width: 100%;
  height: 100%;
}

.cs2-usa__mk {
  position: absolute;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  transform: translate(-50%, -50%);
}

.cs2-usa__mk img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(16, 28, 51, .3));
}

/* soft pulse ring behind each marker */
.cs2-usa__mk:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--ss-gold-rgb),.55);
  animation: cs2-pulse 2.6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes cs2-pulse {
  0% { transform: scale(.6); opacity: .75; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs2-usa__mk:before {
    animation: none;
    opacity: .3;
    transform: scale(1.6);
  }
}

.cs2-usa__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
  border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0;
  background: #fff;
  box-shadow: 0 -6px 22px rgba(16, 28, 51, .12);
}

.cs2-usa__hdl {
  display: block;
  width: calc(36 * var(--u));
  height: calc(4 * var(--u));
  margin: 0 auto calc(12 * var(--u));
  border-radius: 2px;
  background: #dadce0;
}

.cs2-usa__site {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.cs2-usa__fav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #101c33;
  color: var(--ss-gold);
  font-size: calc(8.5 * var(--u));
  font-weight: 800;
  letter-spacing: .02em;
}

.cs2-usa__fav img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.cs2-usa__fav--light {
  background: #fff;
}

.cs2-usa__nm {
  min-width: 0;
  color: #202124;
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  line-height: 1.25;
}

.cs2-usa__nm small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4d5156;
  font-size: calc(10.5 * var(--u));
  font-weight: 400;
}

.cs2 .cs2-usa__ln {
  margin: calc(8 * var(--u)) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f6368;
  font-size: calc(11 * var(--u));
  line-height: 1.3;
}

.cs2-usa__acts {
  display: flex;
  gap: calc(7 * var(--u));
  margin-top: calc(12 * var(--u));
}

.cs2-usa__acts span {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #1a73e8;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.cs2-usa__acts span.pri {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
}

/* national chips use the mock's red for the third chip's globe; keep the local chip frames */
.cs2-gfx--national .cs2-chip--3 {
  border-color: #ff5a5a;
  box-shadow: 0 0 12px rgba(255, 90, 90, .45), 0 6px 12px rgba(0, 0, 0, .1);
}

/* national: tag on the right so chip 1 never hides it; chips 2/3 sit between map and place sheet */
.cs2-usa__tag {
  left: auto;
  right: calc(14 * var(--u));
}

.cs2-gfx--national .cs2-chip--1 {
  top: 17%;
}

.cs2-gfx--national .cs2-chip--2 {
  top: 49%;
}

.cs2-gfx--national .cs2-chip--3 {
  top: 61.5%;
}

/* ==========================================================================
   Typography pass (Figma June-4 V1 text styles). The theme loads Proxima Nova
   300 / 400 / 600 / 700 / 900 only (fonts.css) - there is NO Medium (500) cut, so
   Figma's "Medium" styles would fall back to Regular. They use Semibold (600), the
   nearest real cut, instead of a synthetic weight.
   ========================================================================== */
.cs2 .banner__v3 h1 {
  font-family: "Proxima Nova", sans-serif;
  font-weight: 600;              /* Figma: Medium 70/74, -0.7px */
  letter-spacing: -.01em;
}

.cs2 .banner__v3 .cat li .text {
  font-weight: 400;              /* Figma: Regular 16 */
}

@media (min-width: 1200px) {
  .cs2 .banner__v3 .cat li {
    font-size: 16px;
  }
}

.cs2 .cs2-block h2 {
  font-weight: 600;              /* Figma: Semibold 36/44 */
}

@media (min-width: 1200px) {
  .cs2 .cs2-block h2 {
    font-size: 36px;
    line-height: 1.222;
  }
}

.cs2 .cs2-solutions-title {
  font-weight: 600;
}

/* SEO audit (2026-09-26): the service-block titles are <h3 class="cs2-block__title"> under the
   "How we helped" h2 (they were h2s) - same look as the old .cat-section / .cs2-block h2. */
.cs2 .cs2-block h3.cs2-block__title {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.22;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .cs2 .cs2-block h3.cs2-block__title {
    font-size: 30px;
  }
}

@media (min-width: 1200px) {
  .cs2 .cs2-block h3.cs2-block__title {
    font-size: 36px;
    line-height: 1.222;
  }
}

/* "Schedule a meeting to:" is a <p> (was an h5 after the h2) - same look. */
.mop-section .cs2-meeting__lead {
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .mop-section .cs2-meeting__lead {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

/* Hero breadcrumb trail (mirrors the BreadcrumbList schema) + linked Industry meta. */
.cs2 .cs2-crumbs {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.4;
}

.cs2 .cs2-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs2 .cs2-crumbs li {
  color: rgba(255, 255, 255, .5);
  margin: 0;
  padding: 0;
}

.cs2 .cs2-crumbs li + li::before {
  content: "\203A";
  margin: 0 8px;
  color: rgba(255, 255, 255, .4);
}

.cs2 .cs2-crumbs a,
.cs2 .cs2-hero__metas a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}

.cs2 .cs2-crumbs a:hover,
.cs2 .cs2-crumbs a:focus-visible,
.cs2 .cs2-hero__metas a:hover,
.cs2 .cs2-hero__metas a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .cs2 .cs2-crumbs [aria-current] {
    display: none; /* phones: the H1 right below names the case; keep the trail to one line */
  }

  .cs2 .cs2-crumbs ol {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .cs2 .cs2-crumbs li {
    flex: none;
    white-space: nowrap;
  }

  .cs2 .cs2-crumbs li:nth-last-child(2) {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* stats: Figma Semibold 32 value, Semibold 16 label at 80% white */
.cs2-inline-stats__value,
.cs2-hero-stats__value {
  font-weight: 600;
}

.cs2-inline-stats__label,
.cs2-hero-stats__label {
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}

@media (min-width: 1200px) {
  .cs2-inline-stats__value {
    font-size: 32px;
  }

  .cs2-inline-stats__label {
    font-size: 16px;
    line-height: 1.44;
  }
}

/* bullets: Figma 16px, bold lead Semibold, rest Regular */
.cs2-block .check-list li {
  font-weight: 400;
}

/* insight: Figma Regular 18/28 at 80% white */
@media (min-width: 1200px) {
  .cs2 .cat-section.with-bg .cs2-light {
    font-size: 18px;
    line-height: 1.556;
  }
}

/* About / Challenge: Figma Semibold 36/40 headings, Regular 18/30 body */
.cs2 .cs2-intro h2 {
  font-weight: 600;
}

@media (min-width: 1200px) {
  .cs2 .cs2-intro h2 {
    font-size: 36px;
    line-height: 1.11;
    margin-bottom: 20px;
  }

  .cs2-clamp {
    font-size: 18px;
    line-height: 1.667;
  }
}

/* Meeting CTA award strip: five single-colour navy badges (~80% opacity), 56px high, equal gaps,
   vertically centred; the original colours fade in on hover (Clutch, Forbes, G2). */
.cs2-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.cs2-badges__item {
  position: relative;
  line-height: 0;
  opacity: .8;
  transition: opacity .25s ease-out;
}

.cs2-badges__item img {
  display: block;
  width: auto;
  max-width: none;
  height: 56px;
}

.cs2-badges__item .cs2-badges__color {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .25s ease-out;
}

.cs2-badges__item:hover {
  opacity: 1;
}

.cs2-badges__item--color:hover .cs2-badges__color {
  opacity: 1;
}

.cs2-badges__item--color:hover .cs2-badges__mono {
  visibility: hidden;
  transition: visibility 0s .25s;
}

@media (max-width: 575.98px) {
  /* two centred rows at phone width */
  .cs2-badges {
    justify-content: center;
    gap: 16px 24px;
  }

  .cs2-badges__item img {
    height: 48px;
  }
}

/* hero service pills link to the service pages; same look, subtle hover */
.cs2 .banner__v3 .cat li {
  padding: 0;
  transition: background-color .2s, box-shadow .2s;
}

.cs2-pill-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .625rem 1.25rem;
  color: inherit;
  text-decoration: none !important;
}

.cs2-pill-link:hover,
.cs2-pill-link:focus {
  color: #fff;
}

.cs2 .banner__v3 .cat li:hover,
.cs2 .banner__v3 .cat li:focus-within {
  box-shadow: inset 0 0 0 1px rgba(var(--ss-gold-rgb),.7);
}

.cs2-pill-link:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
  border-radius: 6.25rem;
}

/* /work/ listing: infinite scroll status + industry counts */
.cs2-work__sentinel {
  height: 1px;
}

.cs2-work__loading {
  margin: 10px 0 0;
  color: var(--ss-ink-2);
  font-size: 15px;
  text-align: center;
}

.cs2-work__loading[hidden],
.cs2-radio[hidden] {
  display: none !important;
}

.cs2-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  border: 2px solid rgba(var(--ss-navy-rgb),.15);
  border-top-color: var(--ss-gold);
  border-radius: 50%;
  animation: cs2-spin .8s linear infinite;
}

@keyframes cs2-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cs2-spinner {
    animation: none;
  }
}

.cs2-radio__count {
  color: var(--ss-slate);
  font-size: .85em;
}

/* ==========================================================================
   Listing filter rail - Mike's "Option A: Compact sticky rail" (mock-filters.html)
   template-parts/cs2-work-rail.php; used by /work/ and the /work/web-design/ listings.
   ========================================================================== */
.cs2-rail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cs2-rail-row > .cs2-rail-col {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.cs2-rail-row > .cs2-rail-col ~ * {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .cs2-rail-row {
    flex-wrap: nowrap;
    gap: 36px;
    padding-left: 0;
  }

  .cs2-rail-row > .cs2-rail-col {
    flex: 0 0 280px;
    max-width: 280px;
    align-self: stretch; /* the sticky card travels the whole column, releases at the footer */
    padding: 24px 0 40px;
  }

  .cs2-rail-row > .cs2-rail-col ~ * {
    flex: 1 1 0;
  }
}

/* sticky needs no overflow:hidden ancestor: .site-wrapper is overflow:hidden site-wide */
body:has(.cs2-rail-col) .site-wrapper {
  overflow: visible;
  overflow-x: clip;
}

.cs2-rail {
  display: none;
  font-family: "Proxima Nova", sans-serif;
  color: var(--ss-ink);
}

@media (min-width: 992px) {
  .cs2-rail {
    position: sticky;
    top: 90px;
    display: block;
    max-height: calc(100vh - 110px);
    overflow-y: auto; /* safety valve on short screens */
    padding: 0;
    border: 1px solid var(--ss-line);
    border-radius: 12px;
    background: #fff;
    scrollbar-width: thin;
  }

  body.admin-bar .cs2-rail {
    top: 122px;
    max-height: calc(100vh - 142px);
  }
}

/* Round 2 "G" panel (Mike; cs-work/mock-work-page.html#G without search): collapsible facets with a
   ticked-count badge / folded value in the header, checkbox rows with right-aligned counts, and a
   footer link to the other listing. Replaces Matt's Option B card look (same folding groups). */
.cs2-acc {
  padding: 0 16px;
  border-top: 1px solid var(--ss-line);
}

.cs2-rail > .cs2-acc:first-child,
.cs2-sheet__panel > .cs2-acc:first-child {
  border-top: 0;
}

.cs2-acc__h {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ss-navy);
  font: 600 13px/1 "Proxima Nova", sans-serif;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
}

.cs2-acc__t {
  flex: none;
}

.cs2-acc__n {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ss-gold-soft);
  color: #000;
  font-size: 12px;
  font-weight: 700;
}

.cs2-acc__n[hidden] {
  display: none;
}

/* folded: show the current value ("Any" / "Local"); open: the badge is enough */
.cs2-acc__v {
  overflow: hidden;
  margin: 0 8px 0 auto;
  color: var(--ss-ink-3);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs2-acc__h[aria-expanded="true"] .cs2-acc__v {
  visibility: hidden;
}

.cs2-acc__car {
  flex: none;
  fill: none;
  stroke: var(--ss-ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease-out;
}

.cs2-acc__h[aria-expanded="true"] .cs2-acc__car {
  transform: rotate(180deg);
}

.cs2-acc__b {
  padding: 0 0 12px;
}

.cs2-acc__b[hidden] {
  display: none;
}

.cs2-ck {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--ss-ink) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}

.cs2-ck .cs2-ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ss-ink-3);
}

.cs2-ck__l {
  min-width: 0;
}

.cs2-ck__n {
  margin-left: auto;
  padding-left: 8px;
  color: var(--ss-ink-3);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cs2-ck__box {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ss-on-navy);
  border-radius: 2px;
  background: #fff;
}

.cs2-ck--radio .cs2-ck__box {
  border-radius: 50%;
}

.cs2-ck:hover .cs2-ck__box {
  border-color: var(--ss-ink);
}

.cs2-ck.is-on {
  font-weight: 700;
}

/* selected: gold box, navy check */
.cs2-ck.is-on .cs2-ck__box {
  border-color: var(--ss-gold);
  background: var(--ss-gold);
}

.cs2-ck.is-on .cs2-ck__box::after {
  content: "";
  width: 8px;
  height: 4px;
  border: 2px solid var(--ss-navy);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.cs2-ck--radio.is-on .cs2-ck__box::after {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--ss-navy);
  transform: none;
}

.cs2-ck.is-on .cs2-ic {
  color: var(--ss-gold-end);
}

.cs2-ck.is-off {
  opacity: .4;
  pointer-events: none;
}

.cs2-rail__foot {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--ss-line);
}

.cs2-golink {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-ink) !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.cs2-golink .cs2-ic {
  width: 18px;
  height: 18px;
  color: var(--ss-gold-end);
}

.cs2-golink__ar {
  margin-left: auto;
  fill: none;
  stroke: var(--ss-ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease-out;
}

.cs2-golink:hover .cs2-golink__ar {
  transform: translateX(2px);
  stroke: var(--ss-ink);
}

.cs2-rail__clear {
  color: var(--ss-ink) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.cs2-rail__clear.is-off {
  color: var(--ss-ink-3) !important;
  pointer-events: none;
}

.cs2-rail a:focus-visible,
.cs2-mbar a:focus-visible,
.cs2-mbar button:focus-visible,
.cs2-sheet a:focus-visible,
.cs2-sheet button:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

/* --- phones / tablets: sticky service chip row + Filters bottom sheet --------- */
.cs2-mbar {
  position: sticky;
  top: 58px; /* mobile site header height */
  z-index: 20;
  display: block;
  margin: 0 -15px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-ground);
  font-family: "Proxima Nova", sans-serif;
}

@media (min-width: 992px) {
  .cs2-mbar,
  .cs2-sheet,
  .cs2-sheet-scrim {
    display: none !important;
  }
}

.cs2-mbar__svc {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}

.cs2-mbar__svc::-webkit-scrollbar {
  display: none;
}

.cs2-mbar__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--ss-line);
  border-radius: 99px;
  background: #fff;
  color: var(--ss-ink-2);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.cs2-mbar__tab .cs2-ic {
  width: 18px;
  height: 18px;
  color: var(--ss-slate);
}

.cs2-mbar__tab.is-on {
  border-color: var(--ss-gold);
  background: var(--ss-gold);
  color: var(--ss-ink);
}

.cs2-mbar__tab.is-on .cs2-ic {
  color: var(--ss-ink);
}

/* a service that can't be combined with the ones already ticked (no case study has them all) */
.cs2-mbar__tab.is-off {
  opacity: .4;
  pointer-events: none;
}

/* one sticky row: the Filters button leads the scrolling chip row */
.cs2-mbar__svc .cs2-mbar__fbtn {
  flex: none;
}

.cs2-mbar__fbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--ss-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.cs2-mbar__fbtn .cs2-ic {
  width: 18px;
  height: 18px;
  color: var(--ss-gold);
}

.cs2-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(var(--ss-ink-rgb),.5);
}

.cs2-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  display: grid;
  gap: 18px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 10px 16px 16px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  color: var(--ss-ink);
  font-family: "Proxima Nova", sans-serif;
}

.cs2-sheet[hidden],
.cs2-sheet-scrim[hidden] {
  display: none;
}

.cs2-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto;
  border-radius: 4px;
  background: var(--ss-line-strong);
}

.cs2-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs2-sheet__top b {
  font-size: 18px;
  font-weight: 700;
}

.cs2-sheet__apply {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--ss-gold);
  color: var(--ss-ink);
  font-size: 15px;
  font-weight: 700;
}

html.cs2-sheet-open {
  overflow: hidden;
}

/* /work/: page title + grid column spacing with the rail */
@media (min-width: 992px) {
  .cs2-work .cs2-work__content {
    padding: 24px 0 80px;
  }
}

/* web-design listing inside the rail row: drop the legacy grey divider on the grid column */
.cs2-rail-row .filter-section {
  border-left: 0;
}

@media (min-width: 992px) {
  .cs2-rail-row > #content-section {
    padding-top: 12px;
    padding-left: 0;
  }

  /* legacy .case-studies__content adds 15px (74px from 1500px) of left padding on top of the rail's
     32px gap; zero it so the grid sits the same distance from the rail as on /work/ */
  .cs2-rail-row .case-studies__content {
    margin-left: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   Solutions rebalance (Mike): text column = pill + title + intro + bullets, top-aligned with the
   graphic; graphic column = graphic -> stats row -> insight, max 560px, sticky on desktop.
   Phones: text, graphic, stats, insight.
   ========================================================================== */
body.cs2-detail .site-wrapper {
  overflow: visible;
  overflow-x: clip;
}

.cs2-block__side {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.cs2-block__side .cs2-inline-stats {
  margin-top: 30px;
}

.cs2-block__side .cs2-light {
  margin-top: 24px !important;
}

@media (min-width: 992px) {
  .cs2-block__row {
    align-items: stretch;
  }

  .cs2-block__content {
    align-self: flex-start; /* text starts level with the top of the graphic */
  }

  .cs2-block__visual {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .cs2-block__side {
    position: sticky;
    top: 110px;
  }

  body.admin-bar .cs2-block__side {
    top: 142px;
  }
}

/* ==========================================================================
   Hero text column tidy (Mike): one content width for every row, even 28px rhythm,
   no divider except a subtle 1px top border on the meta strip; stats and meta share
   a 4-column grid so labels line up; testimonial = card-less line with a 2-line clamp.
   ========================================================================== */
.cs2 .banner__v3 .cs2-hero__left > *,
.cs2 .banner__v3 .cs2-hero__left h1 {
  max-width: none;
  width: 100%;
}

.cs2 .banner__v3 .cs2-hero__details {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}

@media (min-width: 992px) {
  .cs2-hero__details {
    margin-top: 28px;
  }
}

.cs2-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
}

.cs2-hero-stats li {
  max-width: none;
  min-width: 0;
}

.cs2-hero-quote,
.cs2-hero-quote--first {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.cs2 .cs2-hero-quote .cs2-hero-quote__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.cs2 .cs2-hero-quote .cs2-hero-quote__text.is-open {
  display: block;
  -webkit-line-clamp: unset;
}

.cs2-hero-quote__more {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ss-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cs2-hero-quote__more[hidden] {
  display: none;
}

.cs2 .banner__v3 .cs2-hero__metas {
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.cs2 .banner__v3 .cs2-hero__metas ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  font-size: 16px;
}

.cs2 .banner__v3 .cs2-hero__metas strong {
  font-size: 11px;
}

@media (max-width: 575.98px) {
  .cs2-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .cs2 .banner__v3 .cs2-hero__metas ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 15px;
  }
}

/* Reviewer avatar fallback everywhere: initials in a gold ring on navy */
.cs2-review .headshot .cs2-initials,
.cs2-initials {
  border: 2px solid var(--ss-gold);
  background: var(--ss-ink);
  color: var(--ss-gold);
}

/* No reviewer photo, verified client logo instead (Mike, 2026-09-27: "where no name, maybe use logo?"):
   same navy-circle-with-gold-ring treatment as the initials fallback, logo contained with ~18% padding
   rather than filling the circle like a photo does. */
.cs2-review .headshot .cs2-avatar-logo,
.cs2-avatar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ss-gold);
  background: var(--ss-ink);
  padding: 0;
}

.cs2-avatar-logo img {
  width: 64%;
  height: 64%;
  object-fit: contain;
}

.cs2-hero-quote__av--initials {
  background: var(--ss-ink);
  color: var(--ss-gold);
}

.cs2-hero-quote__via {
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
}

.csw-hero__quote {
  margin-top: 28px;
}

/* ==========================================================================
   /work/ grid (Mike): 4 per row >= 1600, 3 at 1100-1599, 2 at 700-1099, 1 below.
   Cards sized like the detail page's related-case cards (290/350, 18px title,
   40px logo, 10px radius). Wrapper up to 1720px with 16px gutters.
   ========================================================================== */
.cs2-work .cs2-work__wrap {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 16px;
}

.cs2-work .cs2-work__content {
  max-width: none;
}

.cs2-work .cs2-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

.cs2-work .cs2-cards__col {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .cs2-work .cs2-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .cs2-work .cs2-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .cs2-work .cs2-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs2-work .cs2-card__headline,
.cs2-related .slider-item .holder a.caption {
  font-size: 18px;
  line-height: 1.35;
}

.cs2-work .cs2-card-logo,
.cs2-related .cs2-card-logo {
  height: 40px;
}

/* ==========================================================================
   Hero testimonial as in the Figma hero: 104px photo with a 2px gold ring,
   22px gold stars, short 24px italic quote, 16px author line
   ========================================================================== */
.cs2-hero-quote {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.cs2-hero-quote__av {
  width: 104px;
  height: 104px;
  border: 2px solid var(--ss-gold);
  font-size: 34px;
}

.cs2 .cs2-hero-quote .stars {
  gap: 5px;
  margin-bottom: 10px;
}

.cs2 .cs2-hero-quote .stars svg {
  width: 22px;
  height: 22px;
}

.cs2 .cs2-hero-quote .cs2-hero-quote__text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.cs2-hero-quote figcaption {
  margin-top: 10px;
  font-size: 16px;
}

@media (min-width: 1200px) {
  .cs2 .cs2-hero-quote .cs2-hero-quote__text {
    font-size: 24px;
  }
}

@media (max-width: 575.98px) {
  .cs2-hero-quote {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }

  .cs2-hero-quote__av {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
}

/* hero stats: 4-digit values ("1,960%") must not run into the next column */
@media (min-width: 1200px) {
  .cs2-hero-stats {
    column-gap: 24px;
  }

  .cs2-hero-stats__value {
    font-size: 36px;
  }
}

/* Solutions stats row (max 4 per block): one row on desktop, 2x2 on phones, never a lone orphan
   (3 stats = 3 columns everywhere). */
.cs2-block .cs2-inline-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start; /* a wrapped value (meta row, phrase-length) must not push its neighbours down */
}

.cs2-block .cs2-inline-stats--n1 { grid-template-columns: minmax(0, 1fr); }
.cs2-block .cs2-inline-stats--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs2-block .cs2-inline-stats--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs2-block .cs2-inline-stats--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* SEO block with the AI/ChatGPT stat */

.cs2-block .cs2-inline-stats li {
  flex: none;
  min-width: 0;
  max-width: none;
}

@media (max-width: 575.98px) {
  .cs2-block .cs2-inline-stats--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs2-block .cs2-inline-stats--n5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .cs2-block .cs2-inline-stats--n5 .cs2-inline-stats__value {
    font-size: 22px;
  }

  .cs2-block .cs2-inline-stats--n3 {
    gap: 16px 12px;
  }

  .cs2-block .cs2-inline-stats--n3 .cs2-inline-stats__value {
    font-size: 22px;
  }
}

/* hero testimonial without a reviewer photo: no avatar slot, text from the column edge */
.cs2-hero-quote.cs2-hero-quote--no-photo {
  grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   Card hover (Mike picked variant B): the caption slides up to reveal a gold
   "Read the case study ->" line, image zooms to 1.03; focus-visible mirrors hover and adds the gold
   outline + halo. .cs2-card (/work/, industry pages) and the detail related slider; web-design cards
   (image-over-text layout) in case-study-web-v2.css. Reduced motion: no transforms.
   ========================================================================== */
.cs2-card:not(.csw-card) .cs2-card__headline {
  transition: bottom .3s ease-out;
}

a.cs2-card:not(.csw-card) .cs2-card__headline::after,
.cs2-related .slider-item .holder a.caption::after {
  content: "Read the case study \2192";
  position: absolute;
  display: block;
  color: var(--ss-gold);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .3s ease-out;
}

a.cs2-card:not(.csw-card) .cs2-card__headline::after {
  left: 0;
  top: 100%;
  margin-top: 8px;
}

a.cs2-card:not(.csw-card):hover .cs2-card__headline,
a.cs2-card:not(.csw-card):focus-visible .cs2-card__headline {
  bottom: 48px;
}

a.cs2-card:not(.csw-card):hover .cs2-card__headline::after,
a.cs2-card:not(.csw-card):focus-visible .cs2-card__headline::after {
  opacity: 1;
}

/* related slider on detail pages */
.cs2-related .slider-item .holder {
  transition: box-shadow .3s ease-out;
}

.cs2-related .slider-item .holder picture img {
  transition: transform .3s ease-out;
}

.cs2-related .slider-item .holder:hover picture {
  opacity: 1; /* FED's default dim-on-hover is replaced by the reveal */
}

.cs2-related .slider-item .holder a.caption {
  transition: padding-bottom .3s ease-out;
}

.cs2-related .slider-item .holder a.caption::after {
  left: 20px;
  bottom: 20px;
}

.cs2-related .slider-item .holder:hover a.caption,
.cs2-related .slider-item .holder a.caption:focus-visible {
  padding-bottom: 50px;
}

.cs2-related .slider-item .holder:hover a.caption::after,
.cs2-related .slider-item .holder a.caption:focus-visible::after {
  opacity: 1;
}

.cs2-related .slider-item .holder:hover picture img {
  transform: scale(1.03);
}

.cs2-related .slider-item .holder a.caption:focus-visible {
  outline: none;
}

.cs2-related .slider-item .holder:focus-within {
  box-shadow: 0 0 0 2px var(--ss-gold), 0 0 24px rgba(var(--ss-gold-rgb),.35);
}

.cs2-related .slider-item .holder:focus-within picture img {
  transform: scale(1.03);
}

/* room for the focus halo inside the slick viewport (padding and negative margin cancel: no shift) */
.cs2-related .slick-list {
  padding-top: 14px !important; /* slick writes the centerMode padding inline */
  padding-bottom: 30px !important;
  margin: -14px 0 -30px;
}

@media (prefers-reduced-motion: reduce) {
  .cs2-card .cs2-card__img,
  .cs2-card:hover .cs2-card__img,
  .cs2-card:focus-visible .cs2-card__img,
  .cs2-related .slider-item .holder picture img {
    transform: none !important;
  }

  .cs2-card .cs2-card__headline,
  .cs2-related .slider-item .holder a.caption {
    transition: none;
  }
}

/* ==========================================================================
   /work/ Round 2 "G" (Mike; cs-work/mock-work-page.html#G, no search field): title row inside the
   page container (H1 left edge = rail left edge, Sort right edge = grid right edge), styled Sort
   menu, active-filter chips above the grid, phone sheet footer. 12px vertical rhythm.
   ========================================================================== */
.cs2-work .cs2-work__wrap {
  max-width: 1720px;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .cs2-work .cs2-work__wrap {
    padding: 0 24px;
  }
}

@media (min-width: 1200px) {
  .cs2-work .cs2-work__wrap {
    padding: 0 32px;
  }
}

.cs2-work .cs2-rail-row {
  padding-left: 0;
}

.cs2-work__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 64px;
  padding: 12px 0;
}

.cs2-work__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.cs2-work .cs2-work__heading {
  margin: 0;
  color: var(--ss-navy);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
}

.cs2-work__count {
  color: var(--ss-ink-3);
  font-size: 14px;
  font-weight: 600;
}

/* rail + grid start 24px under the title row */
@media (min-width: 992px) {
  /* the fixed desktop header overlaps the top ~13px of <main>: keep the title row clear of it */
  .cs2-work__top {
    margin-top: 20px;
  }

  .cs2-work .cs2-rail-row > .cs2-rail-col {
    padding-top: 24px;
  }

  .cs2-work .cs2-work__content {
    padding: 24px 0 80px;
  }

  body.admin-bar .cs2-rail,
  .cs2-rail {
    top: 96px;
  }
}

/* Sort: white 8px-radius button with a hairline + custom listbox (native select = no-JS fallback) */
.cs2-sort {
  position: relative;
  margin: 0;
  font-family: "Proxima Nova", sans-serif;
}

.cs2-sort__native {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-ink-3);
  font-size: 14px;
}

.cs2-sort__native[hidden],
.cs2-sort__ui[hidden] {
  display: none;
}

.cs2-sort__native label {
  margin: 0;
}

.cs2-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ss-navy);
  font: 400 14px/1 "Proxima Nova", sans-serif;
  cursor: pointer;
  transition: border-color .15s ease-out;
}

.cs2-sort__btn b {
  font-weight: 700;
}

.cs2-sort__btn:hover,
.cs2-sort__btn[aria-expanded="true"] {
  border-color: var(--ss-on-navy);
}

.cs2-sort__btn:focus-visible,
.cs2-sort__menu:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

.cs2-sort__car {
  fill: none;
  stroke: var(--ss-navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease-out;
}

.cs2-sort__btn[aria-expanded="true"] .cs2-sort__car {
  transform: rotate(180deg);
}

.cs2-sort__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(var(--ss-navy-deep-rgb),.12);
  list-style: none;
}

.cs2-sort__menu[hidden] {
  display: none;
}

.cs2-sort__menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--ss-navy);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cs2-sort__menu li.is-active {
  background: var(--ss-ground);
}

.cs2-sort__menu li svg {
  visibility: hidden;
  fill: none;
  stroke: var(--ss-gold-end);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs2-sort__menu li[aria-selected="true"] {
  font-weight: 800;
}

.cs2-sort__menu li[aria-selected="true"] svg {
  visibility: visible;
}

/* active filters: "83 of 667" + removable chips + Reset all */
.cs2-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--ss-ink-3);
  font-size: 14px;
  font-weight: 600;
}

.cs2-active[hidden] {
  display: none;
}

.cs2-active__chips {
  display: contents;
}

.cs2-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--ss-gold-pale);
  border-radius: 999px;
  background: var(--ss-gold-soft);
  color: #000 !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.cs2-fchip svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.cs2-fchip:hover {
  border-color: var(--ss-gold);
  background: var(--ss-gold-soft);
}

.cs2-active__reset {
  margin-left: 6px;
  color: var(--ss-ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.cs2-active a:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

/* phone sheet: Reset all in the header, "Show N results" footer */
.cs2-sheet {
  gap: 12px;
  padding: 10px 16px 0;
}

.cs2-sheet__top b {
  font-size: 19px;
  font-weight: 700;
}

.cs2-sheet__panel .cs2-acc {
  padding: 0;
}

.cs2-sheet__foot {
  position: sticky;
  bottom: 0;
  padding: 12px 0 24px;
  border-top: 1px solid var(--ss-line);
  background: #fff;
}

.cs2-sheet__apply {
  border-radius: 999px;
  font-weight: 800;
}

.cs2-mbar {
  margin: 0 -16px;
}

.cs2-mbar__fbtn {
  border-radius: 999px;
  background: var(--ss-gold);
  color: #000;
  font-weight: 800;
}

.cs2-mbar__fbtn .cs2-ic {
  color: #000;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .cs2-mbar {
    margin: 0 -24px;
  }

  .cs2-mbar__svc {
    padding: 0 24px;
  }
}

@media (max-width: 991.98px) {
  .cs2-work__top {
    border-bottom: 0;
  }

  /* grid, chips and title share the page gutter (no extra content padding) */
  .cs2-work .cs2-work__content {
    padding: 12px 0 48px;
  }
}

/* ==========================================================================
   Website Design block graphics (Mike, Sept 2026; cs-work/mock-web-block.html options 1, 3, 4).
   template-parts/case-study-v2-graphic.php, service 'web'. All sizes in em: 1em = 1 design px of a
   560px rig (font-size = 100cqw / 560), so the whole rig scales with its column.
   ========================================================================== */
.cs2w {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  container-type: inline-size;
}

.cs2w-rig {
  position: relative;
  width: 560em;
  font-size: 1px;
  font-size: calc(100cqw / 560);
  isolation: isolate;
}

.cs2w-rig::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60em -50em -50em -50em;
  background: radial-gradient(closest-side, rgba(var(--ss-gold-rgb),.22), rgba(var(--ss-gold-rgb),.08) 55%, rgba(var(--ss-gold-rgb),0));
  pointer-events: none;
}

.cs2w img {
  display: block;
  max-width: none;
}

/* --- sleek browser window: thin bezel, three subtle dots, optional short domain --- */
.cs2w-brw {
  position: absolute;
  left: 0;
  top: 0;
  width: 520em;
  overflow: hidden;
  border-radius: 10em;
  background: #fff;
  box-shadow: 0 0 0 1em rgba(255, 255, 255, .14), 0 0 70em -18em rgba(var(--ss-gold-rgb),.5), 0 44em 80em -30em rgba(0, 0, 0, .8);
}

.cs2w-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 22em;
  padding: 0 11em;
  border-bottom: 1em solid #eceef1;
  background: #f6f7f9;
}

.cs2w-dots {
  display: flex;
  gap: 5em;
}

.cs2w-dots i {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: #d5d9df;
}

.cs2w-url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #8a93a3;
  font: 600 max(10em, 7px)/1 "Proxima Nova", Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}

.cs2w-pp {
  position: absolute;
  right: 6em;
  top: 50%;
  display: grid;
  place-items: center;
  width: 18em;
  height: 18em;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 5em;
  background: transparent;
  color: #8a93a3;
  font-size: inherit;
  cursor: pointer;
}

.cs2w-pp:hover,
.cs2w-pp:focus-visible {
  background: #e7e9ee;
  color: #3b4354;
  outline: 2px solid var(--ss-gold);
  outline-offset: 1px;
}

.cs2w-pp svg {
  width: 9em;
  height: 9em;
}

.cs2w-pp .i-play,
.cs2w.is-paused .cs2w-pp .i-pause {
  display: none;
}

.cs2w.is-paused .cs2w-pp .i-play {
  display: block;
}

.cs2w-scr {
  position: relative;
  height: 325em;
  overflow: hidden;
  background: #fff;
}

.cs2w-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* slow scroll: down over --dur, hold, back up; eased at both ends; paused on hover / offscreen */
.cs2w-roll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  animation: cs2w-roll var(--cycle, 80s) cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes cs2w-roll {
  0%, 5% {
    transform: translateY(0);
  }

  65%, 72% {
    transform: translateY(calc(-100% + 325em));
  }

  95%, 100% {
    transform: translateY(0);
  }
}

.cs2w--scroll:hover .cs2w-roll,
.cs2w.is-paused .cs2w-roll,
.cs2w.is-offscreen .cs2w-roll {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .cs2w-roll {
    display: none;
  }

  .cs2w--scroll .cs2w-pp {
    display: none;
  }
}

/* --- phone: slim bezel --- */
.cs2w-phn {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 150em;
  height: 318em;
  padding: 5em;
  border-radius: 32em;
  background: #0a0d12;
  box-shadow: 0 0 0 1.2em #3b4250, 0 34em 60em -14em rgba(0, 0, 0, .85), -10em 10em 40em -8em rgba(0, 0, 0, .45);
}

.cs2w-phn__scr {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27em;
  background: #fff;
}

.cs2w-phn__scr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cs2w-phn__isl {
  position: absolute;
  z-index: 2;
  top: 6em;
  left: 50%;
  width: 40em;
  height: 11em;
  transform: translateX(-50%);
  border-radius: 10em;
  background: #000;
}

/* --- floating gold chip (same family as the PPC chip) --- */
.cs2w-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .66em;
  padding: .66em 1.18em;
  border: 1.5px solid var(--ss-gold);
  border-radius: 999px;
  background: var(--ss-navy-deep);
  color: #fff;
  font-size: max(13.5em, 11px);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

.cs2w-chip svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* option 1: scrolling browser + phone */
.cs2w-rig--scroll {
  height: 420em;
}

.cs2w-rig--scroll .cs2w-chip {
  left: -1.6%;
  bottom: 5.5%;
}

/* option 3: feature tiles */
.cs2w-rig--tiles {
  padding: 6em 0 34em;
}

.cs2w-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22em 20em;
}

.cs2w-tiles > :nth-child(2n) {
  transform: translateY(30em);
}

.cs2w-tile {
  position: relative;
}

.cs2w-tile__win {
  overflow: hidden;
  border-radius: 9em;
  background: #fff;
  box-shadow: 0 0 0 1em rgba(255, 255, 255, .14), 0 30em 50em -24em rgba(0, 0, 0, .8);
}

.cs2w-tile__bar {
  display: flex;
  align-items: center;
  gap: 4em;
  height: 15em;
  padding: 0 8em;
  border-bottom: 1em solid #eceef1;
  background: #f6f7f9;
}

.cs2w-tile__bar i {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #d5d9df;
}

.cs2w-tile__scr {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
}

.cs2w-tile__scr > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cs2w-tile--mob .cs2w-tile__win {
  background: linear-gradient(160deg, #0b2a42, #061a2b);
  box-shadow: 0 0 0 1em rgba(255, 255, 255, .12), 0 30em 50em -24em rgba(0, 0, 0, .8);
}

.cs2w-tile--mob .cs2w-tile__bar {
  display: none;
}

.cs2w-tile--mob .cs2w-tile__scr {
  display: grid;
  place-items: end center;
  height: 168.75em;
  aspect-ratio: auto;
  background: transparent;
}

.cs2w-mini {
  width: 82em;
  height: 150em;
  margin-bottom: -26em;
  padding: 4em;
  border-radius: 17em;
  background: #0a0d12;
  box-shadow: 0 0 0 1.2em #3b4250;
}

.cs2w-mini img {
  width: 100%;
  height: 100%;
  border-radius: 13em;
  object-fit: cover;
  object-position: top;
}

.cs2w-tile .cs2w-chip {
  left: -3%;
  bottom: -7%;
  gap: .5em;
  padding: .55em 1em;
  font-size: max(12em, 10px);
}

/* option 4: device trio */
.cs2w-rig--trio {
  height: 410em;
}

/* option 4b: legacy mockup capture (_cs2_web_capture = mockup) - the mockup image already shows the
   site inside device frames, so render it bare: a single framed-less image, same max width as the
   trio rig (the .cs2w container), same shadow treatment, centered. */
.cs2w--mockup {
  display: flex;
  justify-content: center;
}

.cs2w-mockup__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 70px -18px rgba(var(--ss-gold-rgb),.5), 0 44px 80px -30px rgba(0, 0, 0, .8);
}

.cs2w-lap {
  position: absolute;
  left: 78em;
  top: 0;
  width: 430em;
}

.cs2w-lap__lid {
  position: relative;
  padding: 10em 10em 14em;
  border-radius: 15em 15em 4em 4em;
  background: #0c0f14;
  box-shadow: 0 0 0 1.2em #3a404c, 0 30em 60em -20em rgba(0, 0, 0, .8), 0 0 80em -20em rgba(var(--ss-gold-rgb),.45);
}

.cs2w-lap__lid::before {
  content: "";
  position: absolute;
  top: 3.5em;
  left: 50%;
  width: 4em;
  height: 4em;
  margin-left: -2em;
  border-radius: 50%;
  background: #2a303a;
}

.cs2w-lap__scr {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3em;
  background: #fff;
}

.cs2w-lap__scr img,
.cs2w-tab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cs2w-lap__base {
  position: relative;
  left: -30em;
  width: 490em;
  height: 14em;
  border-radius: 2em 2em 14em 14em;
  background: linear-gradient(#e3e6eb, #a7adb8 70%, #7d8491);
  box-shadow: 0 18em 30em -12em rgba(0, 0, 0, .7);
}

.cs2w-lap__base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 70em;
  height: 5em;
  margin-left: -35em;
  border-radius: 0 0 8em 8em;
  background: #9aa1ad;
}

.cs2w-tab {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 176em;
  height: 250em;
  padding: 8em;
  border-radius: 20em;
  background: #0a0d12;
  box-shadow: 0 0 0 1.2em #3b4250, 0 30em 50em -16em rgba(0, 0, 0, .85);
}

.cs2w-tab img {
  border-radius: 10em;
}

.cs2w-rig--trio .cs2w-phn {
  right: 14em;
  width: 118em;
  height: 250em;
  padding: 4em;
  border-radius: 26em;
}

.cs2w-rig--trio .cs2w-phn__scr {
  border-radius: 22em;
}

.cs2w-rig--trio .cs2w-phn__isl {
  top: 5em;
  width: 32em;
  height: 9em;
}

/* meta row under the website graphic: same grid as the stats, no arrow, a fact not a delta.
   Values can be a word/short phrase (not a number), so unlike the numeric stats they must wrap
   instead of overflowing the graphic column (Mike, 2026-09-26: long functionality values were
   spilling into the text column). */
.cs2-inline-stats--meta {
  min-width: 0;
}

.cs2-inline-stats--meta .cs2-inline-stats__value {
  font-size: 26px;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
}

/* Text values (platform, functionality) run smaller than the numeric one ("Pages built"): ~78% of
   the number size, same weight/colour, so a two-word value like "Online booking" fits one line at
   1440/1024 instead of wrapping and leaving that item's label lower than its neighbours (Mike,
   2026-09-26). Wrapping stays as the fallback for longer values (rule above). */
.cs2-inline-stats--meta .cs2-inline-stats__value--text {
  font-size: 20px; /* ~78% of 26px */
}

.cs2-inline-stats--meta .cs2-inline-stats__label {
  color: rgba(255, 255, 255, .72);
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .cs2-inline-stats--meta .cs2-inline-stats__value {
    font-size: 22px;
  }

  .cs2-inline-stats--meta .cs2-inline-stats__value--text {
    font-size: 17px; /* ~78% of 22px */
  }
}

/* Narrow widths: stack the meta items in one column instead of squeezing 3-4 phrase-length values
   across the row (overrides the numeric-stat n3/n4/n5 column counts, same specificity, later rule). */
@media (max-width: 575.98px) {
  .cs2-block .cs2-inline-stats--meta {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
}

.cs2w .cs2w-url {
  color: #8a93a3 !important;
}

/* ------------------------------------------------------------------------------------------------
   Paid platforms inside the PPC block (2026-09-26): one stats row per platform, each headed by a chip,
   and a Meta-flavoured ad card when the case has Meta stats but no Google Ads stats. */
.cs2-platform-rows {
  display: grid;
  gap: 4px;
}

.cs2-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin: 20px 0 6px;
  padding: 4px 11px;
  border: 1px solid rgba(var(--ss-gold-rgb),.55);
  border-radius: 999px;
  color: var(--ss-gold);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cs2-platform-chip svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.cs2-platform-rows > .cs2-platform-chip:first-child {
  margin-top: 0;
}

/* the generic stats-row top margin (spacing under the graphic) is too much right under a
   platform chip -- the chip's own margin-bottom plus the grid gap already separate it from
   its stats row, so zero this out here. */
.cs2-platform-rows .cs2-inline-stats {
  margin-top: 0;
}

/* Meta ad card: a sponsored Facebook/Instagram post in the Option C card language. */
.cs2-adcard--meta {
  transform: rotate(3deg);
}

.cs2-adcard--meta .cs2-adcard__who small {
  color: #65676b;
}

.cs2 .cs2-adcard__post {
  margin: 10px 0 12px;
  color: #050505;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-line-clamp: 3;
}

.cs2-adcard__media {
  height: 190px;
  margin: 0 -24px;
  background: #e9ecef center / cover no-repeat;
}

.cs2-adcard__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -24px;
  padding: 12px 24px;
  background: #f0f2f5;
}

.cs2-adcard__cta-text {
  min-width: 0;
  flex: 1 1 auto;
}

.cs2-adcard__cta-text b {
  display: block;
  overflow: hidden;
  color: #65676b;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cs2-adcard__cta-text span {
  display: block;
  overflow: hidden;
  color: #050505;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs2-adcard__btn {
  flex: none;
  padding: 8px 14px;
  border-radius: 6px;
  background: #e4e6eb;
  color: #050505;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.cs2-adcard__react {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e4e6eb;
  color: #65676b;
  font-size: 12px;
  font-weight: 600;
}

.cs2-gfx--meta .cs2-adchip {
  left: auto;
  right: 0;
}

@media (max-width: 575.98px) {
  .cs2-adcard--meta {
    transform: rotate(2deg);
  }

  .cs2-adcard__media,
  .cs2-adcard__cta {
    margin: 0 -16px;
  }

  .cs2-adcard__cta {
    padding: 10px 16px;
  }
}

/* ==========================================================================
   Insight box balance (2026-09-26): on desktop the page script moves the insight box under the
   text column when the graphic column is much taller (.cs2-light--in-text); it keeps the same look,
   full column width (capped like the graphic column) and the same top spacing as under the stats.
   ========================================================================== */
.cs2-block__content .cs2-light--in-text {
  width: 100%;
  max-width: 560px;
  margin-top: 32px !important;
}

/* ==========================================================================
   /work/ pretty listing URLs (inc/cs2-work-seo.php, 2026-09-26): intro line under the title row,
   "Show earlier" link on /page/N/, crawlable pager (hidden by the page script, which infinite-scrolls).
   ========================================================================== */
.cs2-work__intro {
  max-width: 880px;
  margin: -4px 0 18px;
  color: var(--ss-ink-2);
  font-size: 16px;
  line-height: 1.55;
}
.cs2-work__intro[hidden],
.cs2-work__earlier[hidden],
.cs2-pager[hidden] {
  display: none;
}
.cs2-work__earlier {
  margin: 0 0 14px;
  font-size: 15px;
}
.cs2-work__earlier a {
  color: var(--ss-link);
  font-weight: 600;
  text-decoration: none;
}
.cs2-work__earlier a:hover {
  text-decoration: underline;
}
.cs2-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 26px 0 8px;
  font-size: 15px;
}
.cs2-pager a,
.cs2-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ss-navy);
  font-weight: 600;
  text-decoration: none;
}
.cs2-pager a:hover {
  border-color: var(--ss-link);
  color: var(--ss-link);
}
.cs2-pager .is-on {
  border-color: var(--ss-navy);
  background: var(--ss-navy);
  color: #fff;
}
.cs2-pager .cs2-pager__gap {
  min-width: 0;
  border: 0;
  background: none;
  padding: 0 2px;
}
@media (max-width: 767.98px) {
  .cs2-work__intro {
    margin: 0 0 14px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Testimonial band, 2-3 people at the client (inc/cs2-review-block.php)
   Mike: the single-review row repeated, stacked one under the other.
   ========================================================================== */
.cs2-review--multi .holder + .holder {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 992px) {
  .cs2-review--multi .holder + .holder {
    margin-top: 64px;
    padding-top: 64px;
  }
}

/* ==========================================================================
   Testimonial band: long quotes clamped to ~10 lines + "Show More" pill (2026-09-26)
   Same .cs2-clamp / .cs2-more pattern as About/Challenge (cs2ClampToggle() in case-study-v2.php), one pill per
   quote, shown by JS only when the quote overflows. Line height stays the band's own (.rev), so 10lh = 10 lines.
   ========================================================================== */
.cs2-review .cs2-rv-quote {
  width: 100%;
}

.cs2-review .cs2-rv-clamp {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.cs2-review .cs2-rv-clamp .cs2-clamp__inner {
  max-height: 14em; /* fallback for browsers without the lh unit */
  max-height: 10lh;
}

.cs2-review .cs2-rv-more {
  margin-top: 18px;
  text-align: center;
  font-style: normal;
}

.cs2-review .cs2-rv-more[hidden] {
  display: none;
}

@media (min-width: 992px) {
  .cs2-review .cs2-rv-more {
    text-align: left;
  }
}

/* ==========================================================================
   Case hero, industry-page look (2026-09-27, Mike: "i like industry page. want case study hero to match ...
   dont change what case study individual heros say. just style. like font, alignment"). Same elements and wording;
   type, spacing, column split, pills, KPI scale, quote, meta strip, box card and background follow the industry
   hero (assets/css/experts-v2.css .ex2-hero / .ex2-trust-pill / .ex2-chip / .ex2-review / .ex2-strip-title).
   Scoped to .cs2-hx (template-parts/case-study-v2.php), so tpl-work-web-design-v2's .cs2-hero is untouched.
   No fades; every size is fixed in CSS (CLS 0).
   ========================================================================== */
.cs2 .banner__v3.cs2-hx {
  background-color: var(--ss-navy-hero, var(--ss-navy-deep));
  background-image: var(--ss-glow-gold); /* industry hero: the gold burst straight on the page navy */
  padding: 48px 0 56px;
}

@media (min-width: 981px) {
  .cs2 .banner__v3.cs2-hx {
    padding: 72px 0 64px;
  }
}

@media (min-width: 992px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero__grid {
    grid-template-columns: 1.05fr .95fr;
    column-gap: 56px;
    align-items: center;
  }
}

/* H1: industry hero scale (54 / 38 / 32, bold, 1.12) with the multiple in the gold gradient */
.cs2 .banner__v3.cs2-hx h1 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
}

@media (min-width: 561px) {
  .cs2 .banner__v3.cs2-hx h1 {
    font-size: 38px;
  }
}

@media (min-width: 981px) {
  .cs2 .banner__v3.cs2-hx h1 {
    font-size: 54px;
  }
}

.cs2 .banner__v3.cs2-hx h1 .cs2-hl {
  background: var(--ss-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* breadcrumb: industry text-2 / text-3 greys */
.cs2 .banner__v3.cs2-hx .cs2-crumbs {
  margin-bottom: 18px;
}

.cs2 .banner__v3.cs2-hx .cs2-crumbs li {
  color: var(--ss-slate);
}

.cs2 .banner__v3.cs2-hx .cs2-crumbs a {
  color: var(--ss-mist);
}

/* service pills = industry trust pills (hairline, 4% white fill, 13px semibold, gold 16px icon) */
.cs2 .banner__v3.cs2-hx .cat {
  gap: 10px;
  margin: 0 0 22px;
}

.cs2 .banner__v3.cs2-hx .cat li {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--ss-snow);
  font-size: 13px;
}

.cs2 .banner__v3.cs2-hx .cat li::before {
  display: none;
}

.cs2 .banner__v3.cs2-hx .cat li:hover,
.cs2 .banner__v3.cs2-hx .cat li:focus-within {
  border-color: rgba(var(--ss-gold-rgb),.6);
  box-shadow: none;
}

.cs2 .banner__v3.cs2-hx .cs2-pill-link {
  gap: 8px;
  padding: 9px 14px;
}

.cs2 .banner__v3.cs2-hx .cat li .text {
  font-weight: 600;
}

.cs2 .banner__v3.cs2-hx .cat li .icon {
  width: 16px;
  min-width: 16px;
}

/* stats + quote block: industry rhythm (26px) */
.cs2 .banner__v3.cs2-hx .cs2-hero__details {
  gap: 26px;
  margin-top: 26px;
}

/* KPIs at the industry stat-chip scale: 28px semibold gold value, 13px label */
.cs2 .banner__v3.cs2-hx .cs2-hero-stats {
  gap: 14px 20px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-stats__value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-stats__value .cs2-stat-up {
  flex-basis: 13px;
  width: 13px;
  height: 10px;
  margin-right: 6px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-stats__label {
  margin-top: 5px;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

@media (min-width: 576px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero-stats__value {
    font-size: 28px;
  }

  .cs2 .banner__v3.cs2-hx .cs2-hero-stats__value .cs2-stat-up {
    flex-basis: 15px;
    width: 15px;
    height: 11px;
    margin-right: 7px;
  }

  .cs2 .banner__v3.cs2-hx .cs2-hero-stats__label {
    font-size: 13px;
  }
}

@media (min-width: 1200px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero-stats__value {
    font-size: 32px;
  }

  .cs2 .banner__v3.cs2-hx .cs2-hero-stats__label {
    font-size: 14px;
  }
}

/* quote = the industry review element: upright text, 16px stars, gold-ring avatar, name/company pair */
.cs2 .banner__v3.cs2-hx .cs2-hero-quote {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote--no-photo {
  grid-template-columns: minmax(0, 1fr);
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote__av {
  width: 64px;
  height: 64px;
  border: 2px solid var(--ss-gold);
  font-size: 22px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote .stars {
  gap: 3px;
  margin-bottom: 10px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote .stars svg {
  width: 16px;
  height: 16px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote .cs2-hero-quote__text {
  color: var(--ss-snow);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote figcaption {
  margin-top: 12px;
  color: var(--ss-slate);
  font-size: 13px;
  line-height: 1.35;
}

.cs2 .banner__v3.cs2-hx .cs2-hero-quote figcaption b {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 576px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero-quote .cs2-hero-quote__text {
    font-size: 17px;
  }
}

@media (min-width: 1200px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero-quote .cs2-hero-quote__text {
    font-size: 19px;
  }
}

/* meta strip: industry small caps (12px bold, .18em, text-3) over text values */
.cs2 .banner__v3.cs2-hx .cs2-hero__metas {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.cs2 .banner__v3.cs2-hx .cs2-hero__metas ul {
  color: var(--ss-snow);
  font-size: 15px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero__metas strong {
  margin-bottom: 4px;
  color: var(--ss-slate);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}

.cs2 .banner__v3.cs2-hx .cs2-hero__metas a {
  color: var(--ss-snow);
}

/* box image = the industry hero's case card: no translucent frame, 10px radius, deep shadow, gold hairline */
.cs2 .banner__v3.cs2-hx .cs2-hero__box {
  max-width: 420px;
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--ss-gold-rgb),.28);
}

.cs2 .banner__v3.cs2-hx .cs2-hero__box::before {
  display: none;
}

.cs2 .banner__v3.cs2-hx .cs2-hero__box > img,
.cs2 .banner__v3.cs2-hx .cs2-hero__box--empty {
  border-radius: 10px;
}

.cs2 .banner__v3.cs2-hx .cs2-hero__logo {
  top: 1.25rem;
  left: 1.25rem;
}

@media (min-width: 992px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero__box {
    margin: 0 auto !important;
  }
}

@media (min-width: 1200px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero__logo {
    top: 1.6rem;
    left: 1.6rem;
  }
}

/* phones / tablets: one 26px rhythm between the stacked hero rows (the grid row gap does the spacing) */
@media (max-width: 991.98px) {
  .cs2 .banner__v3.cs2-hx .cs2-hero__grid {
    row-gap: 26px;
  }

  .cs2 .banner__v3.cs2-hx .cs2-hero__details,
  .cs2 .banner__v3.cs2-hx .cs2-hero__metas {
    margin-top: 0;
  }
}

/* Alignment (Mike, 2026-09-27: "misaligned"): the hero and the 1180px body sections sit on the header's content box
   (header-v2: 1200px, 8px sides -> logo left edge / "Get a free proposal" right edge). The hero used Bootstrap's
   1140 / 1440 (>=1500) container and the body 1180, so neither lined up with the header. Box image flush right. */
@media (min-width: 1200px) {
  .cs2 .banner__v3.cs2-hx > .container,
  .cs2 .cs2-intro .container,
  .cs2 .cat-section .container,
  .cs2 .owner-review .container {
    max-width: 1200px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .cs2 .banner__v3.cs2-hx .cs2-hero__box {
    margin: 0 0 0 auto !important;
  }
}

/* "Sample ad ..." caption: sits under the graphic's query chip on the same edge (left; right for Meta, whose chip is
   on the right), and the results below keep their usual 30px gap (the platform rows had none, so the Google Ads
   label ran into the note; Matt 2026-09-28) */
.cs2-gfxnote {
  margin: 4px 0 0;
  max-width: none;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  color: inherit;
  opacity: .62;
}

.cs2-gfx--meta + .cs2-gfxnote {
  text-align: right;
}

.cs2-gfxnote + .cs2-platform-rows,
.cs2-gfxnote + .cs2-inline-stats {
  margin-top: 30px;
}
/* Paid Ads block with only CTV stats (cs2-fixes/ctv-page, 2026-09-28): the case photo in a TV frame */
.cs2-gfx--ctv{position:relative;display:block;padding:6% 3% 12%}
.cs2-ctvtv{position:relative;width:100%;box-sizing:border-box;padding:10px;border-radius:14px;background:#0b0f19;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -24px rgba(0,0,0,.65)}
.cs2-ctvtv__screen{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:6px;background:#1a2233 center/cover no-repeat}
.cs2-ctvtv__ad{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.66);color:#fff;font-size:12px;font-weight:700;line-height:1.3}
.cs2-ctvtv__bar{position:absolute;left:12px;right:12px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.cs2-ctvtv__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:2px;background:#f5bf3e}
.cs2-ctvtv__stand{display:block;width:30%;height:12px;margin:0 auto;border-radius:0 0 10px 10px;background:linear-gradient(#232c3f,#0b0f19)}