:root {
      --ink: #102b3b;
      --ink-2: #1b465c;
      --paper: #f5f4ef;
      --white: #ffffff;
      --muted: #5d6a70;
      --line: #d9dedc;
      --orange: #f58220;
      --orange-2: #ff9f43;
      --teal: #75c9ba;
      --teal-soft: #def3ed;
      --blue-soft: #e7f2f6;
      --shadow: 0 18px 55px rgba(16, 43, 59, .12);
      --radius: 22px;
      --max: 1180px;
    }
.stelipro-case * { box-sizing: border-box; }
.stelipro-case { scroll-behavior: smooth; }
.stelipro-case {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
    }
.stelipro-case::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 92% 9%, rgba(117, 201, 186, .22), transparent 26rem),
        radial-gradient(circle at 8% 70%, rgba(245, 130, 32, .09), transparent 28rem);
    }
.stelipro-case img { max-width: 100%; display: block; }
.stelipro-case a { color: inherit; }
.stelipro-case button, .stelipro-case a { -webkit-tap-highlight-color: transparent; }
.stelipro-case .wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.stelipro-case .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 18px;
      color: var(--orange);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
.stelipro-case .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.stelipro-case h1, .stelipro-case h2, .stelipro-case h3, .stelipro-case p { margin-top: 0; }
.stelipro-case h1, .stelipro-case h2, .stelipro-case h3 { line-height: 1.08; letter-spacing: -.035em; }
.stelipro-case h1 { max-width: 970px; margin-bottom: 26px; font-size: clamp(2.7rem, 7.1vw, 6.5rem); }
.stelipro-case h2 { max-width: 850px; margin-bottom: 24px; font-size: clamp(2.1rem, 4.8vw, 4.4rem); }
.stelipro-case h3 { margin-bottom: 12px; font-size: clamp(1.22rem, 2vw, 1.7rem); }
.stelipro-case .lead { max-width: 790px; color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.stelipro-case .section-lead { max-width: 790px; color: var(--muted); font-size: 1.12rem; }
.stelipro-case .note { color: var(--muted); font-size: .92rem; }
.stelipro-case .orange { color: var(--orange-2); }
.stelipro-case .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
.stelipro-case .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      color: var(--white);
      background: rgba(16, 43, 59, .92);
      border-bottom: 1px solid rgba(255,255,255,.11);
      backdrop-filter: blur(16px);
    }
.stelipro-case .topbar-inner {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
.stelipro-case .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 850;
      letter-spacing: -.02em;
    }
.stelipro-case .brand-mark {
      width: 35px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--orange);
      border-radius: 10px;
      font-size: .77rem;
      font-weight: 900;
    }
.stelipro-case .top-actions { display: flex; align-items: center; gap: 10px; }
.stelipro-case .view-link {
      padding: 8px 12px;
      color: rgba(255,255,255,.8);
      text-decoration: none;
      font-size: .88rem;
      font-weight: 700;
    }
.stelipro-case .view-link:hover { color: var(--white); }
.stelipro-case .lang-switch {
      display: inline-flex;
      padding: 4px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
    }
.stelipro-case .lang-btn {
      min-width: 44px;
      padding: 7px 10px;
      color: rgba(255,255,255,.65);
      background: transparent;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      font: inherit;
      font-size: .82rem;
      font-weight: 850;
    }
.stelipro-case .lang-btn[aria-pressed="true"] { color: var(--ink); background: var(--white); }
.stelipro-case .hero {
      position: relative;
      min-height: 800px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      color: var(--white);
      background: var(--ink);
    }
.stelipro-case .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(8, 30, 42, .98) 0%, rgba(8, 30, 42, .88) 43%, rgba(8, 30, 42, .28) 80%),
        linear-gradient(0deg, rgba(8, 30, 42, .95) 0%, transparent 55%),
        url("/cases/stelipro/assets/hero-smart-plaza.jpg") center / cover;
      filter: saturate(.8);
    }
.stelipro-case .hero::after {
      content: "";
      position: absolute;
      right: -130px;
      bottom: -190px;
      width: 520px;
      height: 520px;
      border: 100px solid rgba(245, 130, 32, .18);
      border-radius: 50%;
    }
.stelipro-case .hero-inner { position: relative; z-index: 2; padding: 110px 0 72px; }
.stelipro-case .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 34px;
    }
.stelipro-case .tag {
      padding: 8px 13px;
      color: rgba(255,255,255,.78);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 750;
    }
.stelipro-case .metrics {
      position: relative;
      z-index: 3;
      margin-top: -1px;
      color: var(--white);
      background: var(--ink);
      border-top: 1px solid rgba(255,255,255,.12);
    }
.stelipro-case .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-inline: 1px solid rgba(255,255,255,.1);
    }
.stelipro-case .metric {
      min-height: 190px;
      padding: 34px 28px;
      border-right: 1px solid rgba(255,255,255,.1);
    }
.stelipro-case .metric:last-child { border-right: 0; }
.stelipro-case .metric-value { display: block; margin-bottom: 6px; color: var(--orange-2); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.stelipro-case .metric-label { color: rgba(255,255,255,.73); font-size: .96rem; }
.stelipro-case .case-index {
      position: sticky;
      top: 68px;
      z-index: 14;
      overflow-x: auto;
      color: var(--ink);
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 24px rgba(16,43,59,.06);
      backdrop-filter: blur(14px);
      scrollbar-width: thin;
    }
.stelipro-case .case-index-inner {
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 6px;
      width: max-content;
      min-width: 100%;
    }
.stelipro-case .case-index a {
      padding: 8px 12px;
      color: var(--muted);
      border-radius: 10px;
      text-decoration: none;
      font-size: .82rem;
      font-weight: 800;
      white-space: nowrap;
      transition: color .2s ease, background .2s ease;
    }
.stelipro-case .case-index a:hover { color: var(--ink); background: var(--teal-soft); }
.stelipro-case [id] { scroll-margin-top: 145px; }
.stelipro-case section { padding: 110px 0; }
.stelipro-case .section-dark { color: var(--white); background: var(--ink); }
.stelipro-case .section-dark .section-lead, .stelipro-case .section-dark .note { color: rgba(255,255,255,.68); }
.stelipro-case .section-teal { background: var(--teal-soft); }
.stelipro-case .section-white { background: var(--white); }
.stelipro-case .two-col {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: clamp(40px, 8vw, 110px);
      align-items: start;
    }
.stelipro-case .sticky-copy { position: sticky; top: 106px; }
.stelipro-case .cards { display: grid; gap: 16px; }
.stelipro-case .card {
      padding: 28px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 8px 30px rgba(16, 43, 59, .05);
    }
.stelipro-case .card p:last-child { margin-bottom: 0; }
.stelipro-case .card-index {
      display: inline-grid;
      width: 38px;
      height: 38px;
      margin-bottom: 22px;
      place-items: center;
      color: var(--white);
      background: var(--ink);
      border-radius: 11px;
      font-size: .83rem;
      font-weight: 850;
    }
.stelipro-case .before-after {
      display: grid;
      grid-template-columns: 1fr 110px 1fr;
      gap: 22px;
      align-items: stretch;
      margin-top: 54px;
    }
.stelipro-case .state {
      padding: clamp(28px, 4vw, 48px);
      border-radius: var(--radius);
    }
.stelipro-case .state-before { color: var(--ink); background: #e6e9e6; }
.stelipro-case .state-after { color: var(--white); background: var(--ink-2); }
.stelipro-case .state-title { margin-bottom: 24px; font-size: 1rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.stelipro-case .state ul, .stelipro-case .check-list { margin: 0; padding: 0; list-style: none; }
.stelipro-case .state li, .stelipro-case .check-list li {
      position: relative;
      padding-left: 28px;
      margin-bottom: 12px;
    }
.stelipro-case .state li::before, .stelipro-case .check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .62em;
      width: 10px;
      height: 10px;
      background: var(--orange);
      border-radius: 50%;
    }
.stelipro-case .arrow {
      display: grid;
      place-items: center;
      color: var(--orange);
      font-size: 4rem;
      font-weight: 250;
    }
.stelipro-case .work-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 46px;
    }
.stelipro-case .work-card {
      min-height: 250px;
      padding: 30px;
      color: var(--white);
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.11);
      border-radius: var(--radius);
    }
.stelipro-case .work-card:nth-child(2), .stelipro-case .work-card:nth-child(5) { background: rgba(117, 201, 186, .12); }
.stelipro-case .work-card-number { margin-bottom: 48px; color: var(--orange-2); font-size: .82rem; font-weight: 850; letter-spacing: .12em; }
.stelipro-case .work-card p { margin-bottom: 0; color: rgba(255,255,255,.68); }
.stelipro-case .content-showcase { margin-top: 58px; }
.stelipro-case .page-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 28px;
    }
.stelipro-case .page-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 68px;
      padding: 15px 18px;
      text-decoration: none;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
.stelipro-case .page-link:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 10px 28px rgba(16, 43, 59, .08); }
.stelipro-case .page-link::after { content: "↗"; flex: none; color: var(--orange); font-size: 1.2rem; font-weight: 800; }
.stelipro-case .page-link small { display: block; color: var(--muted); font-size: .76rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.stelipro-case .page-link strong { display: block; font-size: .95rem; line-height: 1.25; }
.stelipro-case .visual-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr);
      gap: 22px;
      margin-top: 54px;
      align-items: start;
    }
.stelipro-case .shot {
      overflow: hidden;
      background: #dce4e6;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
.stelipro-case .shot img { width: 100%; height: auto; }
.stelipro-case .shot-mobile { max-height: 690px; }
.stelipro-case .shot-caption { padding: 17px 20px; color: var(--muted); background: var(--white); font-size: .87rem; }
.stelipro-case .photo-band {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      min-height: 560px;
      overflow: hidden;
      color: var(--white);
      background: var(--ink);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
.stelipro-case .photo-band-image { min-height: 430px; background: url("/cases/stelipro/assets/project-mandarin.jpg") center / cover; }
.stelipro-case .photo-band-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 6vw, 76px); }
.stelipro-case .photo-band-copy p { color: rgba(255,255,255,.72); }
.stelipro-case .photo-band-copy .check-list li::before { background: var(--teal); }
.stelipro-case .pipeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 54px;
      counter-reset: pipe;
    }
.stelipro-case .pipe-step {
      position: relative;
      min-height: 250px;
      padding: 30px 24px;
      background: var(--white);
      border: 1px solid var(--line);
      border-right: 0;
      counter-increment: pipe;
    }
.stelipro-case .pipe-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.stelipro-case .pipe-step:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; }
.stelipro-case .pipe-step::before {
      content: "0" counter(pipe);
      display: block;
      margin-bottom: 52px;
      color: var(--orange);
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: .12em;
    }
.stelipro-case .pipe-step::after {
      content: "→";
      position: absolute;
      z-index: 2;
      right: -17px;
      top: 40px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: var(--ink);
      border-radius: 50%;
    }
.stelipro-case .pipe-step:last-child::after { display: none; }
.stelipro-case .pipe-step p { margin: 0; color: var(--muted); font-size: .92rem; }
.stelipro-case .qa-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 46px;
    }
.stelipro-case .qa-item {
      padding: 28px;
      color: var(--white);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius);
    }
.stelipro-case .qa-value { display: block; margin-bottom: 10px; color: var(--teal); font-size: 2.4rem; font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.stelipro-case .qa-item p { margin: 0; color: rgba(255,255,255,.69); }
.stelipro-case .result-panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 60px;
      align-items: center;
      padding: clamp(36px, 6vw, 78px);
      color: var(--white);
      background:
        linear-gradient(110deg, rgba(16,43,59,.97), rgba(16,43,59,.82)),
        url("/cases/stelipro/assets/grilyato-detail.jpg") center / cover;
      border-radius: 30px;
      box-shadow: var(--shadow);
    }
.stelipro-case .result-list { display: grid; gap: 12px; }
.stelipro-case .result {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 15px;
      align-items: start;
      padding: 17px 0;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }
.stelipro-case .result:last-child { border-bottom: 0; }
.stelipro-case .result-mark {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--orange);
      border-radius: 15px;
      font-weight: 900;
    }
.stelipro-case .result p { margin: 0; color: rgba(255,255,255,.68); font-size: .93rem; }
.stelipro-case .honesty {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 22px;
      align-items: start;
      margin-top: 42px;
      padding: 28px;
      background: rgba(245,130,32,.08);
      border: 1px solid rgba(245,130,32,.3);
      border-radius: var(--radius);
    }
.stelipro-case .honesty-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: var(--orange);
      border-radius: 50%;
      font-weight: 900;
    }
.stelipro-case .honesty p:last-child { margin-bottom: 0; }
.stelipro-case .cta {
      position: relative;
      overflow: hidden;
      color: var(--white);
      background: var(--orange);
    }
.stelipro-case .cta::after {
      content: "";
      position: absolute;
      right: -100px;
      top: -200px;
      width: 550px;
      height: 550px;
      border: 120px solid rgba(255,255,255,.13);
      border-radius: 50%;
    }
.stelipro-case .cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.stelipro-case .cta h2 { margin-bottom: 18px; }
.stelipro-case .cta p { max-width: 700px; margin-bottom: 0; color: rgba(255,255,255,.8); }
.stelipro-case .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 58px;
      padding: 15px 24px;
      color: var(--white);
      background: var(--ink);
      border-radius: 14px;
      text-decoration: none;
      font-weight: 850;
      white-space: nowrap;
      box-shadow: 0 14px 30px rgba(16,43,59,.2);
    }
.stelipro-case .btn::after { content: "↗"; }
.stelipro-case footer { padding: 34px 0; color: rgba(255,255,255,.64); background: #0a202c; font-size: .84rem; }
.stelipro-case .footer-inner { display: flex; justify-content: space-between; gap: 20px; }
.stelipro-case [data-lang-panel] { display: none; }
.stelipro-case [data-lang-panel].is-active { display: block; }
@media (max-width: 960px) {
.stelipro-case section { padding: 82px 0; }
.stelipro-case .metric-grid { grid-template-columns: repeat(2, 1fr); }
.stelipro-case .metric:nth-child(2) { border-right: 0; }
.stelipro-case .metric:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
.stelipro-case .two-col, .stelipro-case .result-panel { grid-template-columns: 1fr; }
.stelipro-case .sticky-copy { position: static; }
.stelipro-case .work-grid, .stelipro-case .qa-grid { grid-template-columns: repeat(2, 1fr); }
.stelipro-case .before-after { grid-template-columns: 1fr; }
.stelipro-case .arrow { transform: rotate(90deg); min-height: 64px; }
.stelipro-case .pipeline { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stelipro-case .pipe-step, .stelipro-case .pipe-step:first-child, .stelipro-case .pipe-step:last-child { border: 1px solid var(--line); border-radius: var(--radius); }
.stelipro-case .pipe-step::after { display: none; }
.stelipro-case .photo-band { grid-template-columns: 1fr; }
.stelipro-case .cta-inner { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 680px) {
.stelipro-case { font-size: 16px; }
.stelipro-case .wrap { width: min(calc(100% - 28px), var(--max)); }
.stelipro-case .topbar-inner { min-height: 62px; }
.stelipro-case .case-index { top: 62px; }
.stelipro-case .brand span:last-child { display: none; }
.stelipro-case .view-link { display: none; }
.stelipro-case .hero { min-height: 700px; }
.stelipro-case .hero::before {
        background:
          linear-gradient(0deg, rgba(8,30,42,.98) 0%, rgba(8,30,42,.78) 75%, rgba(8,30,42,.54) 100%),
          url("/cases/stelipro/assets/hero-smart-plaza.jpg") 62% center / cover;
      }
.stelipro-case .hero-inner { padding: 88px 0 52px; }
.stelipro-case .metric-grid { grid-template-columns: 1fr; }
.stelipro-case .metric { min-height: auto; padding: 26px 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.stelipro-case .metric:last-child { border-bottom: 0; }
.stelipro-case .page-list, .stelipro-case .work-grid, .stelipro-case .qa-grid, .stelipro-case .pipeline, .stelipro-case .visual-grid { grid-template-columns: 1fr; }
.stelipro-case .work-card { min-height: auto; }
.stelipro-case .work-card-number { margin-bottom: 30px; }
.stelipro-case .shot-mobile { max-height: none; }
.stelipro-case .photo-band-image { min-height: 310px; }
.stelipro-case .result-panel { gap: 34px; padding: 30px 22px; }
.stelipro-case .result { grid-template-columns: 46px 1fr; }
.stelipro-case .result-mark { width: 42px; height: 42px; }
.stelipro-case .honesty { grid-template-columns: 1fr; }
.stelipro-case .footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.stelipro-case { scroll-behavior: auto; }
.stelipro-case *, .stelipro-case *::before, .stelipro-case *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
.stelipro-case .topbar { position: static; }
.stelipro-case .lang-switch { display: none; }
.stelipro-case .hero { min-height: 680px; }
.stelipro-case section { break-inside: avoid; }
.stelipro-case .page-link { break-inside: avoid; }
}

/* SEOquick chrome: keep case headings following their section color (no black-on-black). */
.stelipro-case :where(h1,h2,h3,h4,h5,h6){color:inherit;}