/* ============================================================
   Despegar case · PORTFOLIO SKIN
   Loaded LAST. Re-skins the narrative chrome to the portfolio's
   magenta identity + Hanken Grotesk, while the product mockups
   inside .frame / .disc-stage / .clean-mini keep Despegar's own
   blue + coral brand (they depict the real product).
   Scope: everything here is under .case unless noted.
   ============================================================ */

:root { scroll-padding-top: 140px; }

/* ---- clear the fixed portfolio nav, then sit the sticky section-tabs
        bar just below it (same behaviour as the Luna / Loop / Cocos cases) ---- */
body { padding-top: 72px; }
.nav__logo { white-space: nowrap; }
.case .case-hero { padding-top: 64px; }

.case .topbar {
  position: sticky; top: 72px; z-index: 40;
  background: color-mix(in srgb, #fff 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.case .topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 11px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.case .topbar-mark {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.case .topbar-mark .tb-glyph {
  position: relative;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: #7C3AED; color: #fff;
}
.case .topbar-mark .tb-glyph::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  -webkit-mask: var(--plane-mask) center/13px 13px no-repeat;
          mask: var(--plane-mask) center/13px 13px no-repeat;
}
.case .secnav { display: flex; align-items: center; gap: 2px; }
.case .secnav a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate-500);
  padding: 7px 11px; border-radius: 8px; letter-spacing: .04em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: color .2s, background .2s;
}
.case .secnav a .sn-num { color: var(--slate-400); font-size: 11px; }
.case .secnav a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.case .secnav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.case .secnav a.active .sn-num { color: var(--accent); }
@media (max-width: 1080px) {
  .case .topbar-in { justify-content: flex-start; gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .case .topbar-in::-webkit-scrollbar { display: none; }
}
@media (max-width: 680px) {
  .case .topbar-mark span:last-child { display: none; }
}

/* ---- the portfolio eyebrow star (✦) must not bleed into the
        case's numbered eyebrow ---- */
.case .eyebrow::before { content: none; }

/* ============================================================
   MAGENTA NARRATIVE CHROME
   ============================================================ */

/* eyebrow + hairline bar */
.case .eyebrow { color: var(--accent); }
.case .eyebrow .bar { background: var(--accent); }

/* hero is fully white — no wash (matches Cocos / Loop) */
.case .case-hero::before { background: none; }
.case .case-hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), #C77DFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.case .case-hero .impact-line .ik,
.case .case-hero .impact-line .iv b {
  background: linear-gradient(118deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #d96be8));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.case .hero-pills .tag .pip { background: var(--accent); }

/* problem one-liner highlight */
.case .problem-quote p .hl { color: color-mix(in srgb, var(--accent) 48%, #ffffff); }

/* diagnosis annotations — narrative, so magenta (not coral) */
.case .anno { border-left-color: var(--accent); }
.case .anno .anum { background: var(--accent); }

/* strategy · paths */
.case .path .pico {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
}
.case .path .pwho { color: var(--accent); }
.case .path .ppri .lvl i.f { background: var(--accent); }
.case .path.feature {
  background: linear-gradient(165deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #1b0a2e));
}
.case .path.feature .pwho { color: color-mix(in srgb, var(--accent) 40%, #ffffff); }
.case .path.feature .ppri .lvl i.f { background: color-mix(in srgb, var(--accent) 40%, #ffffff); }

/* strategy · techniques */
.case .tech .tico { color: var(--accent); }

/* solution captions + screen labels */
.case .sol-caption .sc-meta .pri {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
}
.case .screen-label .lnum { background: var(--accent); }

/* progressive-disclosure notes (right column, narrative) */
.case .disc-note .dn-k { color: var(--accent); }
.case .disc-note.hl {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, #fff), var(--sh-sm);
}
.case .disc-note.hl .dn-k { color: var(--accent); }

/* before / after */
.case .ba-toggle button.on.after-btn { background: var(--accent); }
.case .ba-metric .bm-after { color: var(--accent); }

/* ============================================================
   IA SECTION (dark) — celeste accents → magenta
   ============================================================ */
.case .ia-section .eyebrow { color: color-mix(in srgb, var(--accent) 45%, #ffffff); }
.case .ia-section .eyebrow .bar { background: color-mix(in srgb, var(--accent) 45%, #ffffff); }
.case .ia-section::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%);
}
.case .ia-step .istep-n { color: color-mix(in srgb, var(--accent) 45%, #ffffff); }
.case .ia-step .istep-ic {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 50%, #ffffff);
}
.case .ia-step .istep-tool .tp { background: color-mix(in srgb, var(--accent) 50%, #ffffff); }

/* ============================================================
   ENTRANCE — reuse the portfolio .fade-up observer; soften the
   default offset a touch for the dense case layout.
   ============================================================ */
.case .fade-up { will-change: opacity, transform; }

/* ============================================================
   FOOT — portfolio-consistent next-project + contact, then the
   Despegar concept disclaimer as fine print.
   ============================================================ */
.case .case-foot { padding: 96px 0 28px; }
.case .case-foot .wrap { display: flex; flex-direction: column; gap: 64px; }
.case .cf-next {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: color .25s, padding-left .25s;
}
.case .cf-next:hover { color: var(--accent); padding-left: 12px; }
.case .cf-next .cf-next-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-400); margin-bottom: 8px;
}
.case .cf-next .cf-next-title { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.case .cf-next .arrow { font-size: 30px; transition: transform .25s; }
.case .cf-next:hover .arrow { transform: translateX(8px); }

.case .cf-contact { text-align: center; padding: 8px 0 4px; }
.case .cf-contact h2 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.04; }
.case .cf-contact p { font-size: 19px; color: var(--slate-600); margin-top: 16px; }
.case .cf-contact .btn { margin-top: 30px; }

/* the existing disclaimer footer reads as quiet fine print */
.case .case-footer { padding-top: 56px; }

/* ============================================================
   RESPONSIVE — keep the desktop mockups intact, only relax the
   narrative grids so the page survives narrower viewports.
   ============================================================ */
@media (max-width: 960px) {
  .case .annos,
  .case .paths,
  .case .techs,
  .case .ia-steps,
  .case .ba-metrics { grid-template-columns: 1fr 1fr; }
  .case .sol-caption { grid-template-columns: 1fr; gap: 14px; }
  .case .disc-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .case .annos,
  .case .paths,
  .case .techs,
  .case .ia-steps,
  .case .ba-metrics { grid-template-columns: 1fr; }
  .case .meta-grid { gap: 24px; }
  .case .cf-next .cf-next-title { font-size: 22px; }
}