/*
  Zest Creative editorial rebuild
  Purpose: make the public site feel curated rather than presentation-led.
  This file sits after the original stylesheet and only contains layout refinements.
*/

/* Homepage: introduce services without repeating portfolio imagery */
.home-capabilities-section {
  background: #fff;
}

.home-capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-capability-card a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 6px;
  height: 100%;
  padding: 20px;
  background: linear-gradient(180deg, #fff, #f7fff2);
  border: 1px solid rgba(23, 63, 53, .10);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(29, 57, 47, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-capability-card a:hover {
  transform: translateY(-3px);
  border-color: rgba(101, 189, 70, .42);
  box-shadow: 0 18px 42px rgba(29, 57, 47, .10);
}

.home-capability-card span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--green-dark);
  font-weight: 950;
}

.home-capability-card h3 {
  margin: 0;
  font-size: clamp(21px, 4vw, 27px);
}

.home-capability-card p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.home-selected-work-section {
  background: linear-gradient(180deg, #fff, #f7fff2);
  border-block: 1px solid rgba(23, 63, 53, .07);
}

.homepage-feature-grid .project-card-featured,
.homepage-feature-grid .project-card-featured a {
  grid-column: auto;
  grid-template-columns: none;
  grid-template-rows: 220px 1fr;
}

/* Services overview: clean centred rows instead of uneven 2 / 3 / 2 layouts */
.service-index-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.service-index-card {
  flex: 1 1 280px;
  max-width: 420px;
}

.service-index-card a {
  height: 100%;
}

.service-system-section {
  background: #fff;
}

.service-system-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.service-system-card {
  padding: 24px;
  border: 1px solid rgba(23, 63, 53, .10);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f7fff2);
  box-shadow: var(--shadow-sm);
}

.service-system-card span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--green);
  font-weight: 950;
  letter-spacing: .08em;
}

.service-system-card h3 {
  margin-bottom: 10px;
}

.service-system-card p {
  margin: 0;
  color: var(--muted);
}

/* Service detail pages: reduce repeated proof blocks and keep the useful visual rhythm */
.service-proof-section {
  display: none;
}

.service-snapshot-section + .service-intro-balanced {
  padding-top: 48px;
}

/* Work page: make the archive the hero instead of repeating a proof section above it */
.work-page-hero {
  border-bottom: 1px solid rgba(23, 63, 53, .08);
}

.work-section {
  background: #fff;
}

.work-project-card {
  overflow: hidden;
}

.work-project-body p {
  color: var(--muted);
}

/* Project pages: curated portfolio visuals */
.public-highlight-strip span {
  background: #fff;
  color: var(--green-dark);
}

.public-case-gallery-section {
  background: linear-gradient(180deg, #fff, #f7fff2);
  border-block: 1px solid rgba(23, 63, 53, .07);
}

.public-case-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.public-case-visual {
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(23, 63, 53, .10);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}

.public-case-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border-radius: 18px;
  background: #f3f8ef;
}

.public-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-case-image-fit-contain img {
  object-fit: contain;
}

.public-case-visual figcaption {
  margin-top: 10px;
  color: #667d74;
  font-size: 13px;
  line-height: 1.4;
}

.case-story-flow {
  display: none;
}

/* Keep related content useful without overwhelming the case study */
.related-services-section .service-grid,
.project-hero + .project-story-overview + .public-case-gallery-section + dialog + .soft-section + .related-services-section .service-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .home-capability-grid,
  .service-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-case-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .homepage-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .homepage-feature-grid .project-card a {
    grid-template-rows: 230px 1fr;
  }

  .service-index-board {
    gap: 22px;
  }

  .service-index-card {
    flex-basis: calc(33.333% - 16px);
  }
}

@media (min-width: 1080px) {
  .home-capability-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .home-capability-card a {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .home-capability-card span,
  .home-capability-card p {
    grid-column: auto;
  }

  .home-capability-card span {
    grid-row: auto;
  }

  .homepage-feature-grid {
    gap: 24px;
  }

  .service-index-card {
    flex-basis: calc(25% - 18px);
  }

  .service-system-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .public-case-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .public-case-gallery-count-1 {
    grid-template-columns: minmax(0, .66fr);
  }

  .public-case-gallery-count-2 {
    grid-template-columns: repeat(2, minmax(0, .5fr));
  }

  .related-services-section .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Native service visual system
   Project photography is reserved for case studies and related work. These
   graphics explain how each service works using lightweight HTML / CSS / SVG.
   -------------------------------------------------------------------------- */

.service-index-visual {
  min-height: 190px;
  overflow: hidden;
  background: #f4faef;
}

.service-hero-concept {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(23, 63, 53, .10);
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.service-hero-concept-frame {
  padding: 10px;
  background: linear-gradient(145deg, #fff, #f2faed);
}

.service-hero-concept figcaption {
  padding: 13px 16px;
  color: #577069;
  font-size: 13px;
  font-weight: 760;
  background: linear-gradient(180deg, #fff, #f8fff4);
}

.service-concept-visual {
  --visual-pad: clamp(18px, 4vw, 34px);
  position: relative;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 241, 19, .46), transparent 27%),
    radial-gradient(circle at 12% 92%, rgba(101, 189, 70, .18), transparent 30%),
    linear-gradient(145deg, #fbfff8, #eef8e8);
}

.service-concept-visual-card {
  min-height: 190px;
  border-radius: 0;
}

.service-visual-gridlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .36;
  background-image:
    linear-gradient(rgba(29, 57, 47, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 57, 47, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 96%);
}

.service-concept-visual-card .service-visual-gridlines {
  background-size: 24px 24px;
}

.service-visual-caption {
  position: absolute;
  left: var(--visual-pad);
  right: var(--visual-pad);
  bottom: var(--visual-pad);
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.service-visual-caption span {
  max-width: 46%;
  color: var(--green);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.service-visual-caption strong {
  max-width: 52%;
  color: var(--green-dark);
  font-size: clamp(19px, 2.3vw, 28px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-align: right;
}

.service-concept-visual-card .service-visual-caption {
  left: 16px;
  right: 16px;
  bottom: 14px;
  gap: 10px;
}

.service-concept-visual-card .service-visual-caption span {
  font-size: 8px;
}

.service-concept-visual-card .service-visual-caption strong {
  font-size: 16px;
}

.visual-node {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(23, 63, 53, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .90);
  color: var(--green-dark);
  box-shadow: 0 12px 28px rgba(29, 57, 47, .09);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.service-concept-visual-card .visual-node {
  min-height: 25px;
  padding: 5px 8px;
  font-size: 8px;
}

/* Brand strategy */
.brand-orbit {
  position: absolute;
  left: 50%;
  top: 42%;
  border: 1px solid rgba(29, 57, 47, .17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.brand-orbit-one { width: 58%; aspect-ratio: 1; }
.brand-orbit-two { width: 38%; aspect-ratio: 1; border-style: dashed; }
.brand-core {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 142px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, var(--green-dark), #2d5b4a);
  box-shadow: 0 24px 52px rgba(29, 57, 47, .22);
  color: #fff;
  text-align: center;
}
.brand-core small { margin-bottom: -26px; color: #cfe9c6; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.brand-core strong { font-size: 26px; letter-spacing: -.05em; }
.brand-node-a { left: 10%; top: 25%; }
.brand-node-b { right: 9%; top: 18%; }
.brand-node-c { right: 12%; top: 48%; }
.brand-output-strip {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 64%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.brand-output-strip span {
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}
.service-concept-visual-card .brand-core { width: 72px; }
.service-concept-visual-card .brand-core small { display: none; }
.service-concept-visual-card .brand-core strong { font-size: 13px; }
.service-concept-visual-card .brand-orbit-one { width: 55%; }
.service-concept-visual-card .brand-output-strip { left: 18%; right: 18%; top: 61%; gap: 4px; }
.service-concept-visual-card .brand-output-strip span { padding: 5px 3px; font-size: 7px; }

/* Website */
.browser-frame {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  height: 58%;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(29, 57, 47, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(29, 57, 47, .13);
  transform: rotate(-1.4deg);
}
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid rgba(29,57,47,.1); background: #f7fbf5; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.browser-bar i:nth-child(2) { background: var(--yellow); }
.browser-bar i:nth-child(3) { background: var(--orange); }
.browser-bar span { width: 40%; height: 7px; margin-left: 8px; border-radius: 99px; background: #dfead9; }
.browser-layout { display: grid; grid-template-columns: 22% 1fr; height: calc(100% - 34px); }
.browser-nav { display: grid; align-content: start; gap: 9px; padding: 18px 12px; background: #f1f8ed; border-right: 1px solid rgba(29,57,47,.08); }
.browser-nav b { height: 7px; border-radius: 99px; background: #c8ddc0; }
.browser-nav b:nth-child(2) { width: 72%; }
.browser-nav b:nth-child(3) { width: 88%; }
.browser-main { padding: 18px; }
.browser-hero-block { width: 68%; height: 54px; border-radius: 10px; background: linear-gradient(135deg, var(--green-dark), var(--green-mid)); }
.browser-copy-lines { display: grid; gap: 7px; margin-top: 12px; }
.browser-copy-lines b { height: 6px; border-radius: 99px; background: #dfead9; }
.browser-copy-lines b:nth-child(2) { width: 82%; }
.browser-copy-lines b:nth-child(3) { width: 56%; }
.browser-card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.browser-card-row span { height: 44px; border-radius: 9px; background: linear-gradient(145deg, #f5ffe9, #dff0d6); border: 1px solid #d6e8ce; }
.website-route {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 69%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.website-route span { padding: 7px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(29,57,47,.13); color: var(--green-dark); font-size: 10px; font-weight: 900; box-shadow: 0 8px 20px rgba(29,57,47,.07); }
.website-route i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--green), var(--orange)); }
.service-concept-visual-card .browser-frame { left: 8%; right: 8%; top: 8%; height: 57%; border-radius: 10px; }
.service-concept-visual-card .browser-bar { height: 18px; padding: 0 7px; gap: 3px; }
.service-concept-visual-card .browser-bar i { width: 4px; height: 4px; }
.service-concept-visual-card .browser-layout { height: calc(100% - 18px); }
.service-concept-visual-card .browser-main { padding: 8px; }
.service-concept-visual-card .browser-nav { padding: 8px 5px; gap: 4px; }
.service-concept-visual-card .browser-nav b, .service-concept-visual-card .browser-copy-lines b { height: 3px; }
.service-concept-visual-card .browser-hero-block { height: 25px; }
.service-concept-visual-card .browser-copy-lines { margin-top: 5px; gap: 3px; }
.service-concept-visual-card .browser-card-row { margin-top: 6px; gap: 3px; }
.service-concept-visual-card .browser-card-row span { height: 18px; border-radius: 4px; }
.service-concept-visual-card .website-route { top: 65%; left: 12%; right: 12%; gap: 4px; }
.service-concept-visual-card .website-route span { padding: 4px 6px; font-size: 6px; }

/* Digital marketing */
.digital-ring {
  position: absolute;
  left: 50%;
  top: 40%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.digital-ring-one { width: 56%; aspect-ratio: 1; border: 1px solid rgba(29,57,47,.16); }
.digital-ring-two { width: 40%; aspect-ratio: 1; border: 1px dashed rgba(101,189,70,.46); }
.digital-core {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, var(--yellow), var(--orange));
  color: var(--green-dark);
  box-shadow: 0 20px 44px rgba(242, 140, 0, .20);
}
.digital-core small { margin-bottom: -18px; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.digital-core strong { font-size: 22px; letter-spacing: -.04em; }
.digital-node-a { left: 8%; top: 17%; }
.digital-node-b { right: 8%; top: 14%; }
.digital-node-c { right: 4%; top: 44%; }
.digital-node-d { right: 24%; top: 61%; }
.digital-node-e { left: 8%; top: 49%; }
.signal-bars { position: absolute; left: 16%; bottom: 25%; z-index: 3; display: flex; align-items: end; gap: 5px; height: 48px; }
.signal-bars i { width: 8px; height: 24%; border-radius: 99px; background: var(--green); }
.signal-bars i:nth-child(2) { height: 46%; }.signal-bars i:nth-child(3) { height: 72%; }.signal-bars i:nth-child(4) { height: 54%; }.signal-bars i:nth-child(5) { height: 100%; background: var(--orange); }
.service-concept-visual-card .digital-core { width: 58px; }
.service-concept-visual-card .digital-core small { display: none; }
.service-concept-visual-card .digital-core strong { font-size: 11px; }
.service-concept-visual-card .signal-bars { bottom: 27%; height: 25px; }
.service-concept-visual-card .signal-bars i { width: 4px; }

/* Signage and wayfinding */
.wayfinding-map { position: absolute; inset: 2% 0 auto; width: 100%; height: 74%; }
.wayfinding-map .map-road { fill: none; stroke: rgba(29,57,47,.10); stroke-width: 34; stroke-linecap: round; }
.wayfinding-map .map-road-b { stroke-width: 22; }
.wayfinding-map .route-path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 8; }
.wayfinding-map circle { fill: var(--yellow); stroke: var(--green-dark); stroke-width: 4; }
.map-label { position: absolute; z-index: 5; display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(29,57,47,.12); color: var(--green-dark); box-shadow: 0 8px 20px rgba(29,57,47,.08); font-size: 10px; font-weight: 900; }
.map-label-a { left: 7%; top: 57%; }.map-label-b { left: 25%; top: 35%; }.map-label-c { left: 45%; top: 24%; }.map-label-d { right: 25%; top: 47%; }.map-label-e { right: 5%; top: 34%; }
.sign-totem { position: absolute; right: 11%; top: 10%; z-index: 6; display: grid; place-items: center; width: 58px; height: 118px; border-radius: 8px 8px 2px 2px; background: var(--green-dark); box-shadow: 8px 12px 28px rgba(29,57,47,.20); transform: rotate(3deg); }
.sign-totem:after { content: ""; position: absolute; bottom: -18px; width: 4px; height: 18px; background: var(--green-dark); }
.sign-totem span { width: 22px; height: 6px; border-radius: 99px; background: var(--yellow); }
.sign-totem b { color: #fff; }
.direction-arrow {
  display: block;
  width: 24px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(0 39%, 62% 39%, 62% 8%, 100% 50%, 62% 92%, 62% 61%, 0 61%);
}
.service-concept-visual-card .wayfinding-map { top: -4%; height: 77%; }
.service-concept-visual-card .map-label { padding: 3px 5px; font-size: 6px; }
.service-concept-visual-card .sign-totem { width: 28px; height: 58px; right: 9%; }
.service-concept-visual-card .sign-totem:after { bottom: -8px; height: 8px; width: 2px; }
.service-concept-visual-card .sign-totem b { width: 12px; height: 8px; }
.service-concept-visual-card .sign-totem span { width: 12px; height: 3px; }

/* Exhibition environments */
.booth-floor { position: absolute; left: 15%; right: 9%; top: 50%; height: 30%; z-index: 1; background: linear-gradient(145deg, #d8e8d1, #f9fff5); clip-path: polygon(10% 0, 100% 10%, 83% 100%, 0 83%); box-shadow: 0 20px 50px rgba(29,57,47,.12); }
.booth-backwall { position: absolute; left: 20%; top: 15%; z-index: 2; width: 45%; height: 43%; border: 2px solid var(--green-dark); border-bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,248,225,.92)); transform: skewY(-2deg); box-shadow: 0 20px 38px rgba(29,57,47,.10); }
.booth-backwall span { position: absolute; left: 12%; right: 20%; top: 22%; height: 22%; border-radius: 6px; background: var(--green-dark); }
.booth-header { position: absolute; left: 16%; right: 14%; top: 10%; z-index: 5; height: 48px; display: grid; place-items: center; background: var(--green-dark); color: #fff; transform: perspective(600px) rotateY(-5deg); box-shadow: 0 16px 30px rgba(29,57,47,.18); }
.booth-header strong { font-size: 18px; letter-spacing: .18em; }
.booth-screen { position: absolute; left: 29%; top: 30%; z-index: 4; width: 22%; height: 17%; background: linear-gradient(135deg, var(--yellow), var(--orange)); border: 5px solid #fff; box-shadow: 0 8px 18px rgba(29,57,47,.13); }
.booth-plinth { position: absolute; left: 22%; top: 54%; z-index: 5; width: 12%; height: 17%; background: #fff; border: 1px solid #d7e4d2; box-shadow: 0 12px 24px rgba(29,57,47,.12); }
.booth-counter { position: absolute; right: 20%; top: 51%; z-index: 5; width: 21%; height: 17%; background: linear-gradient(135deg, var(--green), #8bd465); clip-path: polygon(8% 0, 100% 8%, 92% 100%, 0 91%); box-shadow: 0 12px 26px rgba(29,57,47,.14); }
.booth-table { position: absolute; right: 8%; top: 39%; z-index: 4; width: 17%; aspect-ratio: 1; border: 8px solid #fff; border-radius: 50%; box-shadow: 0 10px 24px rgba(29,57,47,.13); }
.visitor-path { position: absolute; inset: 4% 0 auto; z-index: 6; width: 100%; height: 78%; pointer-events: none; }
.visitor-path path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 8; }
.visitor-path circle { fill: var(--yellow); stroke: var(--green-dark); stroke-width: 3; }
.booth-label { position: absolute; z-index: 7; padding: 5px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(29,57,47,.11); color: var(--green-dark); font-size: 9px; font-weight: 900; box-shadow: 0 8px 18px rgba(29,57,47,.08); }
.booth-label-a { left: 7%; top: 66%; }.booth-label-b { left: 44%; top: 52%; }.booth-label-c { right: 7%; top: 25%; }
.service-concept-visual-card .booth-header { height: 24px; }
.service-concept-visual-card .booth-header strong { font-size: 8px; }
.service-concept-visual-card .booth-label { padding: 3px 5px; font-size: 6px; }

/* Brand collateral */
.source-card { position: absolute; left: 8%; top: 18%; z-index: 4; width: 27%; padding: 18px; border-radius: 16px; background: var(--green-dark); color: #fff; box-shadow: 0 20px 42px rgba(29,57,47,.19); transform: rotate(-4deg); }
.source-card small { display: block; color: #cce7c3; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.source-card strong { display: block; margin: 8px 0 14px; font-size: 17px; line-height: 1; letter-spacing: -.03em; }
.source-card i { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.25); }
.source-card i:nth-of-type(2) { width: 76%; }.source-card i:nth-of-type(3) { width: 54%; }
.content-arrow { position: absolute; left: 39%; top: 35%; z-index: 4; width: 34px; height: 22px; color: var(--orange); }
.collateral-stack { position: absolute; right: 12%; top: 10%; z-index: 3; width: 40%; height: 55%; }
.collateral-sheet { position: absolute; inset: 0; padding: 16px; border: 1px solid rgba(29,57,47,.11); border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(29,57,47,.10); }
.collateral-sheet span { display: block; width: 34%; height: 7px; border-radius: 99px; background: var(--green); }
.collateral-sheet b { display: block; width: 66%; height: 34px; margin-top: 12px; border-radius: 7px; background: var(--green-dark); }
.collateral-sheet i { display: block; width: 88%; height: 6px; margin-top: 13px; border-radius: 99px; background: #dbe8d5; }
.sheet-a { transform: translate(-22%, 12%) rotate(-8deg); }.sheet-b { transform: translate(-10%, 5%) rotate(-3deg); }.sheet-c { transform: rotate(5deg); }
.format-chips { position: absolute; left: 10%; right: 10%; top: 68%; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.format-chips span { padding: 8px 5px; border-radius: 999px; background: linear-gradient(135deg, var(--yellow), var(--orange)); color: var(--green-dark); font-size: 9px; font-weight: 950; text-align: center; }
.service-concept-visual-card .source-card { padding: 8px; border-radius: 8px; }
.service-concept-visual-card .source-card small { font-size: 5px; }.service-concept-visual-card .source-card strong { margin: 4px 0 6px; font-size: 8px; }.service-concept-visual-card .source-card i { height: 2px; margin-top: 3px; }
.service-concept-visual-card .content-arrow { width: 16px; height: 10px; }
.service-concept-visual-card .collateral-sheet { padding: 7px; border-radius: 6px; }
.service-concept-visual-card .collateral-sheet span { height: 3px; }.service-concept-visual-card .collateral-sheet b { height: 15px; margin-top: 5px; }.service-concept-visual-card .collateral-sheet i { height: 3px; margin-top: 5px; }
.service-concept-visual-card .format-chips { gap: 3px; }
.service-concept-visual-card .format-chips span { padding: 4px 2px; font-size: 5px; }

/* Corporate communications and video */
.storyboard { position: absolute; left: 8%; right: 8%; top: 13%; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.story-frame { position: relative; height: 142px; overflow: hidden; border: 1px solid rgba(29,57,47,.12); border-radius: 14px; background: #fff; box-shadow: 0 16px 34px rgba(29,57,47,.10); }
.story-frame:before { content: ""; position: absolute; inset: 12px 12px 48%; border-radius: 9px; background: linear-gradient(135deg, #e4f3dd, #b8ddb0); }
.story-frame span:not(.play-mark) { position: absolute; left: 12px; right: 28px; bottom: 35px; height: 6px; border-radius: 99px; background: var(--green-dark); }
.story-frame i { position: absolute; left: 12px; right: 48px; bottom: 20px; height: 5px; border-radius: 99px; background: #d5e4cf; }
.frame-b { background: var(--green-dark); }
.frame-b:before { inset: 0; border-radius: 0; background: radial-gradient(circle at 50% 48%, rgba(255,241,19,.42), transparent 30%), linear-gradient(135deg, #315d4e, #19352c); }
.play-mark { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: var(--yellow); color: var(--green-dark); box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 17px; padding-left: 3px; }
.story-timeline { position: absolute; left: 17%; right: 17%; top: 59%; z-index: 5; display: flex; align-items: center; gap: 8px; }
.story-timeline span { padding: 7px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(29,57,47,.12); color: var(--green-dark); font-size: 10px; font-weight: 900; box-shadow: 0 8px 18px rgba(29,57,47,.07); }
.story-timeline i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--green), var(--orange)); }
.audio-wave { position: absolute; right: 10%; top: 70%; z-index: 4; display: flex; align-items: center; gap: 4px; height: 32px; }
.audio-wave i { width: 4px; height: 28%; border-radius: 99px; background: var(--green); }.audio-wave i:nth-child(2),.audio-wave i:nth-child(6){height:55%}.audio-wave i:nth-child(3),.audio-wave i:nth-child(5){height:86%}.audio-wave i:nth-child(4){height:100%;background:var(--orange)}
.service-concept-visual-card .storyboard { gap: 4px; }
.service-concept-visual-card .story-frame { height: 64px; border-radius: 7px; }
.service-concept-visual-card .story-frame:before { inset: 6px 6px 48%; border-radius: 4px; }
.service-concept-visual-card .story-frame span:not(.play-mark) { left: 6px; right: 14px; bottom: 16px; height: 3px; }
.service-concept-visual-card .story-frame i { left: 6px; right: 22px; bottom: 9px; height: 2px; }
.service-concept-visual-card .play-mark { width: 24px; font-size: 8px; }
.service-concept-visual-card .story-timeline { top: 55%; left: 11%; right: 11%; gap: 3px; }
.service-concept-visual-card .story-timeline span { padding: 4px 5px; font-size: 6px; }
.service-concept-visual-card .audio-wave { top: 65%; height: 17px; }
.service-concept-visual-card .audio-wave i { width: 2px; }

/* Methodology infographic on service pages */
.service-method-section {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(23, 63, 53, .08);
}

.service-method-section:before {
  content: "";
  position: absolute;
  right: -180px;
  top: -220px;
  width: 520px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,241,19,.22), transparent 67%);
  pointer-events: none;
}

.service-method-shell {
  position: relative;
  z-index: 1;
}

.service-method-heading {
  max-width: 820px;
  margin-bottom: 32px;
}

.service-method-heading p {
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
}

.service-method-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 28px;
  background: linear-gradient(145deg, #f8fff4, #fff);
  box-shadow: var(--shadow-sm);
}

.service-method-step,
.service-method-result {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid rgba(23,63,53,.09);
  border-radius: 18px;
  background: #fff;
}

.service-method-step > span {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 950;
}

.service-method-step strong,
.service-method-result strong {
  color: var(--green-dark);
  line-height: 1.15;
}

.service-method-result {
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 86px;
  padding: 18px;
  background: linear-gradient(135deg, var(--green-dark), #285144);
  color: #fff;
}

.service-method-result span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-method-result strong {
  color: #fff;
  font-size: 19px;
}

.service-principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.service-principle-card {
  min-height: 100%;
  padding: 24px;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(29,57,47,.06);
}

.service-principle-card > span {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.service-principle-card h3 {
  margin-bottom: 10px;
  font-size: 23px;
}

.service-principle-card p {
  margin: 0;
  color: var(--muted);
}

/* The service overview cards now use native visuals rather than project images. */
.service-index-card a {
  grid-template-rows: 190px 1fr;
}

@media (min-width: 700px) {
  .service-principle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .service-method-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    padding: 20px;
  }

  .service-method-step,
  .service-method-result {
    min-width: 0;
    min-height: 128px;
    grid-template-columns: 1fr;
    align-content: space-between;
    gap: 24px;
    padding: 18px 16px;
    border-radius: 0;
    border-right: 1px solid rgba(23,63,53,.09);
  }

  .service-method-step:first-child,
  .service-method-step:nth-last-child(2),
  .service-method-result {
    border-radius: 18px;
  }

  .service-method-step:nth-last-child(2) {
    border-right: 1px solid rgba(23,63,53,.09);
  }

  .service-method-result {
    margin-left: 0;
  }

  .service-method-step::after {
    content: "";
    position: absolute;
    right: -17px;
    top: 50%;
    z-index: 5;
    width: 14px;
    height: 10px;
    transform: translateY(-50%);
    background: var(--green-dark);
    clip-path: polygon(0 38%, 58% 38%, 58% 0, 100% 50%, 58% 100%, 58% 62%, 0 62%);
    pointer-events: none;
  }
}

@media (min-width: 1080px) {
  .service-index-card a {
    grid-template-rows: 220px 1fr;
  }

  .service-index-visual,
  .service-concept-visual-card {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-orbit-one,
  .digital-ring-one {
    animation: service-visual-drift 12s ease-in-out infinite alternate;
  }
  .brand-orbit-two,
  .digital-ring-two {
    animation: service-visual-drift 9s ease-in-out infinite alternate-reverse;
  }
  .signal-bars i,
  .audio-wave i {
    animation: service-visual-pulse 2.8s ease-in-out infinite alternate;
  }
  .signal-bars i:nth-child(2n),
  .audio-wave i:nth-child(2n) { animation-delay: -.8s; }
  .visitor-path path,
  .route-path { animation: service-route-move 18s linear infinite; }
}

@keyframes service-visual-drift {
  from { transform: translate(-50%, -50%) scale(.98); opacity: .72; }
  to { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}

@keyframes service-visual-pulse {
  from { transform: scaleY(.75); opacity: .72; }
  to { transform: scaleY(1.08); opacity: 1; }
}

@keyframes service-route-move {
  to { stroke-dashoffset: -120; }
}

/* --------------------------------------------------------------------------
   Native project case-study storytelling
   Turns strategy, process and results into responsive website-native graphics
   instead of displaying presentation slides as the case study itself.
   -------------------------------------------------------------------------- */

.case-theme-stan {
  --case-accent: #c9ff12;
  --case-accent-2: #ffd728;
  --case-dark: #090d0f;
  --case-dark-2: #151b1f;
  --case-soft: #f6faee;
  --case-line: rgba(201, 255, 18, .24);
  --case-on-dark: #f7fff2;
}

.case-theme-symbio {
  --case-accent: #ee4057;
  --case-accent-2: #8bd8e7;
  --case-dark: #0a2330;
  --case-dark-2: #123746;
  --case-soft: #f1f8fa;
  --case-line: rgba(139, 216, 231, .22);
  --case-on-dark: #f8fcff;
}

.case-theme-brand {
  --case-accent: var(--green);
  --case-accent-2: var(--yellow);
  --case-dark: #173f35;
  --case-dark-2: #245848;
  --case-soft: #f7fff2;
  --case-line: rgba(101, 189, 70, .22);
  --case-on-dark: #fff;
}

.case-theme-digital {
  --case-accent: var(--yellow);
  --case-accent-2: var(--green);
  --case-dark: #153b33;
  --case-dark-2: #23574a;
  --case-soft: #fbfbea;
  --case-line: rgba(244, 204, 53, .24);
  --case-on-dark: #fff;
}

.case-theme-signage {
  --case-accent: var(--yellow);
  --case-accent-2: var(--orange);
  --case-dark: #183f36;
  --case-dark-2: #28594c;
  --case-soft: #fbfaed;
  --case-line: rgba(244, 204, 53, .22);
  --case-on-dark: #fff;
}

.case-theme-exhibition {
  --case-accent: var(--orange);
  --case-accent-2: var(--yellow);
  --case-dark: #203c35;
  --case-dark-2: #31584e;
  --case-soft: #fff8ef;
  --case-line: rgba(240, 128, 48, .24);
  --case-on-dark: #fff;
}

.case-theme-editorial {
  --case-accent: var(--yellow);
  --case-accent-2: var(--orange);
  --case-dark: #1c4037;
  --case-dark-2: #2c584d;
  --case-soft: #fffbee;
  --case-line: rgba(244, 204, 53, .22);
  --case-on-dark: #fff;
}

.case-theme-communications {
  --case-accent: var(--orange);
  --case-accent-2: var(--green);
  --case-dark: #193d35;
  --case-dark-2: #28564b;
  --case-soft: #fff7f0;
  --case-line: rgba(240, 128, 48, .24);
  --case-on-dark: #fff;
}

.case-theme-zest {
  --case-accent: var(--green);
  --case-accent-2: var(--orange);
  --case-dark: #173f35;
  --case-dark-2: #245848;
  --case-soft: #f7fff2;
  --case-line: rgba(101, 189, 70, .22);
  --case-on-dark: #fff;
}

.case-hero-visual {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 30px;
  padding: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 46%),
    var(--case-dark);
  color: var(--case-on-dark);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.case-hero-visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--case-line);
  border-radius: 22px;
  pointer-events: none;
}

.case-hero-ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .82;
  z-index: -1;
}

.case-hero-ambient-a {
  width: 260px;
  height: 260px;
  right: -80px;
  top: -68px;
  background: radial-gradient(circle, color-mix(in srgb, var(--case-accent) 62%, transparent), transparent 68%);
}

.case-hero-ambient-b {
  width: 330px;
  height: 330px;
  left: -150px;
  bottom: -190px;
  border: 1px solid var(--case-line);
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--case-accent-2) 7%, transparent), 0 0 0 88px color-mix(in srgb, var(--case-accent) 5%, transparent);
}

.case-hero-kicker,
.case-hero-strapline,
.case-hero-signals,
.case-hero-brand {
  position: relative;
  z-index: 2;
}

.case-hero-kicker {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 8px 11px;
  border: 1px solid var(--case-line);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.case-hero-brand {
  margin-top: 80px;
  font-size: clamp(54px, 10vw, 110px);
  line-height: .86;
  letter-spacing: -.055em;
  font-weight: 950;
}

.case-theme-stan .case-hero-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.07em;
}

.case-theme-symbio .case-hero-brand {
  letter-spacing: .16em;
  font-weight: 550;
  font-size: clamp(42px, 7vw, 78px);
}

.case-hero-brand-long .case-hero-brand {
  font-size: clamp(40px, 7vw, 78px);
  line-height: .92;
}

.case-hero-brand-extra-long .case-hero-brand {
  font-size: clamp(32px, 5.4vw, 60px);
  line-height: .96;
}

.case-hero-strapline {
  margin-top: 14px;
  color: var(--case-accent);
  font-weight: 900;
  letter-spacing: .01em;
}

.case-theme-symbio .case-hero-strapline {
  color: var(--case-on-dark);
  font-size: 12px;
  letter-spacing: .32em;
}

.case-hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.case-hero-signals span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 800;
}

.native-case-story {
  background: linear-gradient(180deg, #fff 0, var(--case-soft) 44%, #fff 100%);
}

.native-case-story-shell {
  display: grid;
  gap: 24px;
}

.native-case-module {
  display: grid;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(23, 63, 53, .10);
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 54px rgba(29,57,47,.06);
}

.native-case-module-heading {
  max-width: 760px;
}

.native-case-module-heading h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 4.6vw, 48px);
}

.native-case-module-heading p {
  margin: 0;
  color: #5e746c;
  font-size: 16px;
  line-height: 1.7;
}

.case-visual-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--case-dark);
  color: var(--case-on-dark);
}

.case-visual-panel::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -150px;
  bottom: -150px;
  border: 1px solid var(--case-line);
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--case-accent) 5%, transparent), 0 0 0 86px color-mix(in srgb, var(--case-accent-2) 4%, transparent);
  pointer-events: none;
}

.case-network-visual {
  padding: 24px;
}

.case-network-center {
  position: relative;
  z-index: 2;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--case-accent);
  color: var(--case-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--case-accent) 10%, transparent);
}

.case-theme-stan .case-network-center {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.case-network-items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.case-network-items article {
  position: relative;
  padding: 18px 18px 18px 42px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.case-network-items article > span {
  position: absolute;
  left: 18px;
  top: 23px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--case-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--case-accent) 10%, transparent);
}

.case-network-items h3,
.case-step-track h3,
.case-flow-track h3,
.case-info-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.case-network-items p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.55;
}

.case-step-track,
.case-flow-track,
.case-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.case-step-track article,
.case-flow-track article,
.case-info-grid article {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 22px;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 20px;
  background: #fff;
}

.case-step-track article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--case-accent), var(--case-accent-2));
}

.case-step-number,
.case-flow-index,
.case-info-marker {
  display: inline-flex;
  margin-bottom: 30px;
  color: var(--case-accent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

.case-step-track p,
.case-flow-track p,
.case-info-grid p {
  margin: 0;
  color: #62776f;
  font-size: 14px;
  line-height: 1.6;
}

.case-shift-visual {
  padding: 26px;
}

.case-shift-route {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}

.case-shift-state {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}

.case-shift-state span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.case-shift-state strong {
  display: block;
  font-size: clamp(24px, 5vw, 42px);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.case-shift-to {
  border-color: color-mix(in srgb, var(--case-accent) 55%, transparent);
  background: color-mix(in srgb, var(--case-accent) 10%, transparent);
}

.case-shift-to strong {
  color: var(--case-accent);
}

.case-shift-arrow {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.case-shift-arrow span {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), var(--case-accent));
}

.case-shift-arrow span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--case-accent);
  border-right: 2px solid var(--case-accent);
  transform: translateY(-50%) rotate(45deg);
}

.case-shift-points {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.case-shift-points span {
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 750;
}

.case-flow-track article {
  min-height: 190px;
  background: linear-gradient(180deg, var(--case-soft), #fff);
}

.case-flow-track article::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--case-accent), var(--case-accent-2));
}

.case-info-grid article {
  min-height: 190px;
  background: linear-gradient(180deg, #fff, var(--case-soft));
}

.case-info-marker {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
  border-radius: 50%;
  background: var(--case-accent);
  color: var(--case-dark);
  letter-spacing: 0;
}

.case-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.case-evidence-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 126px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--case-soft), #fff 68%);
}

.case-evidence-grid article::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -72px;
  bottom: -72px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--case-accent) 26%, transparent);
  box-shadow: 0 0 0 20px color-mix(in srgb, var(--case-accent-2) 5%, transparent);
  pointer-events: none;
}

.case-evidence-grid article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--case-accent);
  color: var(--case-dark);
  font-size: 11px;
  font-weight: 950;
}

.case-evidence-grid p {
  position: relative;
  z-index: 1;
  margin: 2px 0 0;
  color: #435d54;
  font-size: 15px;
  line-height: 1.62;
}

.case-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.case-scope-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 84px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, var(--case-soft));
}

.case-scope-grid article::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -28px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--case-accent) 28%, transparent);
  pointer-events: none;
}

.case-scope-grid article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--case-dark);
  color: var(--case-accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}

.case-scope-grid strong {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.35;
}

.case-scope-grid p {
  grid-column: 2;
  margin: -4px 0 0;
  color: #62776f;
  font-size: 13px;
  line-height: 1.55;
}

.case-metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: color-mix(in srgb, var(--case-accent) 18%, var(--case-dark));
}

.case-native-metric {
  position: relative;
  z-index: 2;
  min-height: 130px;
  padding: 20px;
  background: var(--case-dark);
}

.case-native-metric strong {
  display: block;
  margin-bottom: 8px;
  color: var(--case-accent);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1;
  letter-spacing: -.04em;
}

.case-native-metric span {
  display: block;
  max-width: 150px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.case-native-note {
  margin: 12px 4px 0;
  color: #6b7e77;
  font-size: 12px;
  line-height: 1.5;
}

/* Related services: compact project-specific navigation rather than another
   oversized service-card grid. */
.related-services-section {
  background: linear-gradient(180deg, #fff, #f7fbf4);
  border-top: 1px solid rgba(23,63,53,.07);
  border-bottom: 1px solid rgba(23,63,53,.07);
}

.related-services-shell {
  display: grid;
  gap: 28px;
}

.related-services-heading {
  margin-bottom: 0;
}

.related-services-heading p {
  max-width: 560px;
  margin: 16px 0 0;
}

.related-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.related-service-card a {
  position: relative;
  display: block;
  height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(23,63,53,.10);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(29,57,47,.045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.related-service-card a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--orange));
  transition: width .25s ease;
}

.related-service-card a:hover,
.related-service-card a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(101,189,70,.28);
  box-shadow: 0 18px 44px rgba(29,57,47,.08);
}

.related-service-card a:hover::after,
.related-service-card a:focus-visible::after {
  width: 100%;
}

.related-service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

.related-service-card-top span:last-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f8ed;
  font-size: 16px;
}

.related-service-card h3 {
  margin-bottom: 10px;
  font-size: clamp(21px, 2.4vw, 28px);
}

.related-service-card p {
  margin: 0;
  color: #61766e;
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 700px) {
  .case-network-items,
  .case-info-grid,
  .case-evidence-grid,
  .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-step-track,
  .case-flow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .case-hero-visual {
    min-height: 470px;
    padding: 38px;
    border-radius: 36px;
  }

  .case-hero-brand {
    margin-top: 130px;
  }

  .native-case-story-shell {
    gap: 30px;
  }

  .native-case-module {
    grid-template-columns: minmax(250px, .58fr) minmax(0, 1.42fr);
    gap: 36px;
    align-items: start;
    padding: 34px;
    border-radius: 34px;
  }

  .native-case-module-heading {
    position: sticky;
    top: 118px;
  }

  .case-network-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-step-track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .case-step-track article {
    min-height: 250px;
    padding: 20px;
  }

  .case-flow-track {
    display: flex;
    gap: 16px;
  }

  .case-flow-track article {
    flex: 1 1 0;
    min-width: 0;
    min-height: 250px;
    padding: 20px;
    overflow: visible;
  }

  .case-flow-track article:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 4;
    right: -14px;
    top: 50%;
    width: 12px;
    height: 10px;
    transform: translateY(-50%);
    background: var(--case-dark);
    clip-path: polygon(0 38%, 58% 38%, 58% 0, 100% 50%, 58% 100%, 58% 62%, 0 62%);
    pointer-events: none;
  }

  .case-shift-route {
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    align-items: stretch;
  }

  .case-shift-arrow {
    min-height: 100%;
  }

  .case-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Keep reporting notes directly beneath the metric panel on desktop.
     Without an explicit column, CSS grid auto-placement moved the note
     beneath the sticky module heading in the left column. */
  .native-case-module-metrics .case-native-note {
    grid-column: 2;
  }

  .related-services-shell {
    grid-template-columns: minmax(250px, .56fr) minmax(0, 1.44fr);
    gap: 52px;
    align-items: start;
  }

  .related-services-heading {
    position: sticky;
    top: 118px;
  }
}

@media (min-width: 1080px) {
  .native-case-module {
    grid-template-columns: minmax(300px, .52fr) minmax(0, 1.48fr);
    gap: 50px;
    padding: 42px;
  }

  .case-network-visual,
  .case-shift-visual {
    padding: 32px;
  }

  .case-network-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .case-network-count-5 article:last-child {
    grid-column: 1 / -1;
  }

  .case-info-grid,
  .case-evidence-grid,
  .case-scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-info-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-metric-count-9 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .related-service-card a {
    padding: 26px;
  }
}

@media (max-width: 430px) {
  .case-hero-visual {
    min-height: 340px;
    padding: 22px;
  }

  .case-hero-brand {
    font-size: 52px;
  }

  .case-theme-symbio .case-hero-brand {
    font-size: 38px;
  }

  .native-case-module {
    padding: 20px;
    border-radius: 24px;
  }

  .case-metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .case-native-metric {
    min-height: 116px;
    padding: 16px;
  }

  .case-native-metric strong {
    font-size: 28px;
  }
}