:root {
  --dc-green: #2ED06E;
  --dc-green-ultra: #F5FFF9;
  --dc-navy: #081E42;
  --dc-navy-soft: rgba(8,30,66,.78);
  --dc-muted: rgba(8,30,66,.60);
  --dc-border: #D5F7E2;
  --dc-border-soft: #E8FBEF;
  --dc-danger: #E25454;
  --dc-shadow-sm: 0 2px 8px rgba(8,30,66,.06), 0 1px 3px rgba(8,30,66,.04);
  --dc-shadow-md: 0 10px 34px rgba(8,30,66,.09), 0 3px 10px rgba(8,30,66,.05);
  --dc-shadow-lg: 0 22px 58px rgba(8,30,66,.13), 0 8px 20px rgba(8,30,66,.07);
  --dc-ease: .32s cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #fff;
  color: var(--dc-navy);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(46,208,110,.20); color: var(--dc-navy); }
:focus-visible { outline: 2px solid var(--dc-green); outline-offset: 4px; }

.case-study {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}
.artboard {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 835 / 1536;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 25% at 8% 3%, rgba(46,208,110,.12), transparent 72%),
    radial-gradient(ellipse 44% 28% at 95% 21%, rgba(8,30,66,.065), transparent 70%),
    radial-gradient(ellipse 48% 25% at 10% 82%, rgba(46,208,110,.10), transparent 72%),
    linear-gradient(180deg, #fff 0%, var(--dc-green-ultra) 46%, #fff 100%);
  container-type: inline-size;
}
.artboard::before,
.artboard::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
}
.artboard::before {
  width: 31cqw;
  height: 31cqw;
  left: -18cqw;
  top: 30cqw;
  background: radial-gradient(circle, rgba(46,208,110,.09), transparent 68%);
}
.artboard::after {
  width: 25cqw;
  height: 25cqw;
  right: -14cqw;
  bottom: 18cqw;
  background: radial-gradient(circle, rgba(8,30,66,.055), transparent 68%);
}
.decor, .dotted { pointer-events: none; }
.decor { position: absolute; z-index: 8; opacity: .22; filter: saturate(.4) hue-rotate(42deg); }
.hero-copy, .overview-copy, .problem-copy, .solution-copy { position: absolute; z-index: 10; }

/* DeepCiphers navigation pill */
.back-link {
  position: absolute;
  left: 2.2%;
  top: 1.5%;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .52cqw;
  min-height: 2.7cqw;
  padding: .58cqw .95cqw;
  border: 1px solid var(--dc-border);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--dc-navy);
  box-shadow: var(--dc-shadow-sm);
  backdrop-filter: blur(12px);
  font-size: .79cqw;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--dc-ease), border-color var(--dc-ease), box-shadow var(--dc-ease), background var(--dc-ease);
}
.back-link svg {
  width: 1cqw;
  height: 1cqw;
  fill: none;
  stroke: var(--dc-green);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-link:hover {
  transform: translateY(-2px);
  border-color: rgba(46,208,110,.6);
  background: #fff;
  box-shadow: var(--dc-shadow-md);
}

/* Hero */
.hero-copy { left: 5%; top: 6.1%; width: 36%; }
.hero-copy .brand-logo-mini {
  width: auto;
  height: auto;
  max-width: 12.5cqw;
  max-height: 4.1cqw;
  margin-bottom: 1.55cqw;
  object-fit: contain;
  object-position: left center;
}
.dc-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.1cqw;
  margin-bottom: 1.15cqw;
  padding: .45cqw .82cqw;
  border: 1px solid var(--dc-border);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--dc-green);
  box-shadow: var(--dc-shadow-sm);
  font-size: .68cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.kicker { margin-bottom: 3.3cqw; line-height: 1; }
.kicker strong {
  display: inline-block;
  color: var(--dc-green);
  font-size: 1.05cqw;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.kicker span {
  display: block;
  margin-top: .45cqw;
  color: var(--dc-muted);
  font-size: .9cqw;
  font-weight: 500;
  line-height: 1.25;
}
.hero-copy h1 {
  margin: 0;
  color: var(--dc-navy);
  font-size: 3.55cqw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.11cqw;
  text-wrap: balance;
}
.hero-copy h1 strong,
.hero-copy h1 span { display: block; }
.hero-copy h1 strong { font-weight: 700; }
.hero-copy h1 span { margin-top: .38cqw; color: var(--dc-navy-soft); font-weight: 500; }
.hero-copy p {
  width: 100%;
  margin: 2.5cqw 0 0;
  color: var(--dc-navy-soft);
  font-size: 1.03cqw;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.008em;
}

.hero-phones.project-visual {
  position: absolute;
  z-index: 3;
  left: 48.4%;
  top: 4.1%;
  width: 45.5%;
  height: auto;
  max-width: 46%;
  padding: 1.2cqw;
  border: 1px solid var(--dc-border);
  border-radius: 2cqw;
  background: rgba(255,255,255,.82);
  box-shadow: var(--dc-shadow-lg);
  object-fit: contain;
  object-position: center;
  backdrop-filter: blur(12px);
}

/* Overview */
.overview-phones.project-visual {
  position: absolute;
  z-index: 4;
  left: 4.4%;
  top: 34.8%;
  width: 38.3%;
  height: auto;
  padding: 1.15cqw;
  border: 1px solid var(--dc-border);
  border-radius: 1.8cqw;
  background: rgba(255,255,255,.84);
  box-shadow: var(--dc-shadow-md);
  object-fit: contain;
}
.overview-copy {
  left: 48.4%;
  top: 39.8%;
  width: 44.6%;
  padding: 2.25cqw 2.25cqw 2.15cqw;
  border: 1px solid var(--dc-border);
  border-radius: 1.75cqw;
  background: rgba(255,255,255,.82);
  box-shadow: var(--dc-shadow-sm);
  backdrop-filter: blur(12px);
}
.overview-copy h2 {
  margin: 0 0 1.7cqw;
  color: var(--dc-navy);
  font-size: 3.05cqw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.085cqw;
}
.overview-copy h2::after {
  content: "";
  display: block;
  width: 4.7cqw;
  height: .23cqw;
  margin-top: 1.05cqw;
  border-radius: 999px;
  background: var(--dc-green);
}
.overview-copy p {
  width: 100%;
  margin: 0;
  color: var(--dc-navy-soft);
  font-size: 1.08cqw;
  line-height: 1.82;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .8cqw;
  margin-top: 2.25cqw;
}
.stat {
  min-width: 0;
  min-height: 5.2cqw;
  padding: .8cqw .7cqw;
  display: flex;
  align-items: center;
  gap: .55cqw;
  border: 1px solid var(--dc-border-soft);
  border-radius: 1cqw;
  background: var(--dc-green-ultra);
}
.stat-icon {
  width: 2.35cqw;
  height: 2.35cqw;
  flex: 0 0 2.35cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dc-green);
  color: #fff;
  box-shadow: 0 .35cqw .9cqw rgba(46,208,110,.18);
}
.stat-icon svg {
  width: 1.2cqw;
  height: 1.2cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat > div { min-width: 0; display: flex; flex-direction: column; }
.stat b {
  color: var(--dc-navy);
  font-size: 1.03cqw;
  font-weight: 700;
  line-height: 1.05;
}
.stat small {
  margin-top: .25cqw;
  overflow: hidden;
  color: var(--dc-muted);
  font-size: .67cqw;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Problem / solution cards */
.statement {
  padding: 2.05cqw 2.15cqw 1.75cqw;
  border: 1px solid var(--dc-border);
  border-radius: 1.65cqw;
  background: rgba(255,255,255,.86);
  box-shadow: var(--dc-shadow-sm);
  backdrop-filter: blur(10px);
}
.statement h3 {
  margin: 0;
  color: var(--dc-navy);
  font-size: 2.08cqw;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.045cqw;
}
.statement h3 span { color: var(--dc-green); }
.statement i {
  display: block;
  width: 5.9cqw;
  height: .23cqw;
  margin: .82cqw 0 1.5cqw;
  border-radius: 999px;
  background: var(--dc-green);
}
.statement ul { list-style: none; margin: 0; padding: 0; }
.statement li {
  position: relative;
  margin-bottom: 1.12cqw;
  padding-left: 1.25cqw;
  color: var(--dc-navy-soft);
  font-size: .96cqw;
  line-height: 1.38;
}
.statement li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35cqw;
  width: .58cqw;
  height: .58cqw;
  border-radius: 50%;
  background: var(--dc-green);
  box-shadow: 0 0 0 .16cqw rgba(46,208,110,.12);
}
.problem-copy { left: 8.8%; top: 64%; width: 35.3%; }
.problem-copy li::before { background: var(--dc-danger); box-shadow: 0 0 0 .16cqw rgba(226,84,84,.09); }
.problem-character {
  position: absolute;
  z-index: 5;
  left: 57.2%;
  top: 65.1%;
  width: 27%;
  height: auto;
  filter: drop-shadow(0 1cqw 1.6cqw rgba(8,30,66,.08));
}

.solution-visual {
  position: absolute;
  z-index: 5;
  left: 7.4%;
  top: 80.2%;
  width: 32.5%;
  height: 18.4%;
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.solution-visual.project-solution .ring-a { width: 29.2cqw; height: 29.2cqw; background: rgba(46,208,110,.10); }
.solution-visual.project-solution .ring-b { width: 23.1cqw; height: 23.1cqw; background: rgba(46,208,110,.18); }
.solution-visual.project-solution .ring-c { width: 17.4cqw; height: 17.4cqw; background: rgba(8,30,66,.10); }
.solution-visual.project-solution .project-solution-image {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 22.2cqw;
  height: auto;
  max-height: 20.5cqw;
  padding: .72cqw;
  border: 1px solid var(--dc-border);
  border-radius: 1.35cqw;
  background: rgba(255,255,255,.88);
  object-fit: contain;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 1.1cqw 1.9cqw rgba(8,30,66,.13));
}
.solution-copy { left: 49.7%; top: 82.8%; width: 43.2%; }

/* Decorative template assets softened into the DeepCiphers system */
.top-arrow { left: 13.5%; top: 2.6%; width: 10.6%; }
.speech { left: 37.8%; top: 2%; width: 12.1%; }
.bubble-lines { left: 48.6%; top: 1.75%; width: 2.5%; }
.arrow-up { left: 47.6%; top: 20.9%; width: 4.7%; }
.loop-arrow { left: 44.4%; top: 30.2%; width: 19.6%; }
.ticks { left: 76.3%; top: 25%; width: 2.55%; }
.dotted { position: absolute; z-index: 6; overflow: visible; }
.dotted path { fill: none; stroke: rgba(8,30,66,.28); stroke-width: 1.05; stroke-dasharray: 4 5; stroke-linecap: round; }
.dotted-1 { left: 27.7%; top: 55.35%; width: 42%; height: 12.7%; }
.dotted-2 { left: 28%; top: 74.7%; width: 42.5%; height: 9.2%; }

/* Tablet and mobile: convert the poster-style desktop template into a clean DeepCiphers content flow. */
@media (max-width: 1024px) {
  .artboard {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    padding: 30px 28px 86px;
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 6%, rgba(46,208,110,.11), transparent 28%),
      linear-gradient(180deg,#fff 0%,var(--dc-green-ultra) 48%,#fff 100%);
  }
  .artboard::before, .artboard::after, .decor, .dotted { display: none; }
  .back-link {
    position: relative;
    left: auto;
    top: auto;
    min-height: 44px;
    margin: 0 0 34px;
    padding: 10px 15px;
    gap: 8px;
    font-size: 13px;
  }
  .back-link svg { width: 16px; height: 16px; }
  .hero-copy, .overview-copy, .problem-copy, .solution-copy,
  .hero-phones.project-visual, .overview-phones.project-visual,
  .problem-character, .solution-visual {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .hero-copy { max-width: 760px; }
  .hero-copy .brand-logo-mini { max-width: 190px; max-height: 62px; margin-bottom: 20px; }
  .dc-detail-eyebrow { min-height: 30px; margin-bottom: 16px; padding: 6px 11px; font-size: 10px; }
  .kicker { margin-bottom: 26px; }
  .kicker strong { font-size: 13px; }
  .kicker span { margin-top: 5px; font-size: 13px; }
  .hero-copy h1 { font-size: clamp(42px,7vw,68px); line-height: 1.04; letter-spacing: -.045em; }
  .hero-copy h1 span { margin-top: 6px; }
  .hero-copy p { max-width: 720px; margin-top: 24px; font-size: 15px; line-height: 1.75; }
  .hero-phones.project-visual,
  .overview-phones.project-visual {
    width: min(100%, 760px);
    max-width: 100%;
    margin: 38px auto 0;
    padding: 14px;
    border-radius: 24px;
  }
  .overview-phones.project-visual { margin-top: 64px; }
  .overview-copy {
    margin-top: 28px;
    padding: 28px;
    border-radius: 24px;
  }
  .overview-copy h2 { margin: 0 0 20px; font-size: clamp(34px,6vw,50px); letter-spacing: -.04em; }
  .overview-copy h2::after { width: 70px; height: 3px; margin-top: 15px; }
  .overview-copy p { font-size: 14px; line-height: 1.8; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 28px; }
  .stat { min-height: 76px; padding: 12px; gap: 10px; border-radius: 14px; }
  .stat-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat b { font-size: 15px; }
  .stat small { margin-top: 4px; font-size: 11px; }
  .problem-copy, .solution-copy {
    margin-top: 64px;
    padding: 28px;
    border-radius: 24px;
  }
  .statement h3 { font-size: 28px; letter-spacing: -.03em; }
  .statement i { width: 76px; height: 3px; margin: 10px 0 23px; }
  .statement li { margin-bottom: 14px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
  .statement li::before { top: 7px; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(46,208,110,.10); }
  .problem-character { width: min(74%, 440px); margin: 34px auto 0; }
  .solution-visual { height: 390px; margin-top: 56px; }
  .solution-visual.project-solution .ring-a { width: 310px; height: 310px; }
  .solution-visual.project-solution .ring-b { width: 242px; height: 242px; }
  .solution-visual.project-solution .ring-c { width: 182px; height: 182px; }
  .solution-visual.project-solution .project-solution-image {
    width: min(82vw,430px);
    max-height: 300px;
    padding: 10px;
    border-radius: 20px;
  }
  .solution-copy { margin-top: 4px; }
}

@media (max-width: 600px) {
  .artboard { padding: 22px 16px 68px; }
  .back-link { margin-bottom: 28px; }
  .hero-copy .brand-logo-mini { max-width: 165px; max-height: 54px; }
  .hero-copy h1 { font-size: clamp(36px,11vw,48px); }
  .hero-copy p { font-size: 14px; }
  .hero-phones.project-visual, .overview-phones.project-visual { margin-top: 30px; padding: 10px; border-radius: 18px; }
  .overview-phones.project-visual { margin-top: 48px; }
  .overview-copy, .problem-copy, .solution-copy { padding: 22px; border-radius: 20px; }
  .overview-copy h2 { font-size: 34px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat { min-height: 68px; }
  .statement h3 { font-size: 25px; }
  .problem-copy { margin-top: 48px; }
  .problem-character { width: min(86%,400px); }
  .solution-visual { height: 330px; margin-top: 44px; }
  .solution-visual.project-solution .ring-a { width: 250px; height: 250px; }
  .solution-visual.project-solution .ring-b { width: 198px; height: 198px; }
  .solution-visual.project-solution .ring-c { width: 150px; height: 150px; }
  .solution-visual.project-solution .project-solution-image { width: min(86vw,350px); max-height: 230px; }
}

@media (max-width: 380px) {
  .artboard { padding-inline: 12px; }
  .hero-copy h1 { font-size: 34px; }
  .overview-copy h2 { font-size: 31px; }
  .stats { grid-template-columns: 1fr; }
  .solution-visual { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Transparent portfolio mockups: keep the generated device artwork floating naturally
   on the page instead of placing it inside a white/glass image card. */
.hero-phones.project-visual,
.overview-phones.project-visual,
.solution-visual.project-solution .project-solution-image {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-phones.project-visual,
.overview-phones.project-visual {
  filter: drop-shadow(0 1.1cqw 1.8cqw rgba(8,30,66,.14));
}
.solution-visual.project-solution .project-solution-image {
  filter: drop-shadow(0 1.1cqw 1.9cqw rgba(8,30,66,.13));
}

@media (max-width: 820px) {
  .hero-phones.project-visual,
  .overview-phones.project-visual,
  .solution-visual.project-solution .project-solution-image {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

/* Mockup transparency cleanup: keep every project device mockup floating with no
   coloured halo/ring background behind the artwork. */
.solution-visual.project-solution .ring,
.solution-visual.project-solution .ring-a,
.solution-visual.project-solution .ring-b,
.solution-visual.project-solution .ring-c {
  display: none !important;
  background: transparent !important;
}
.solution-visual.project-solution {
  background: transparent !important;
}