:root {
  --bg: #05060c;
  --surface: #0a0c14;
  --surface-2: #10131d;
  --border: rgba(237,237,237,0.12);
  --border-soft: rgba(237,237,237,0.07);
  --orange: #F28C13;
  --orange-hover: #ffa033;
  --white: #ffffff;
  --muted: #a7adbe;
  --muted-dark: #8b90a0;
  --green: #4ade80;
  --red: #f87171;
  --radius: 20px;
  --radius-lg: 24px;
  --serif: 'Urbanist', sans-serif;
  --sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; overscroll-behavior-x: none; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  overscroll-behavior-x: none;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* ===== Global overflow safeguard ===== */
img, svg, video { max-width: 100%; height: auto; }
.chips > *, .final-grid > *, .container.nav > * { min-width: 0; }

h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1.14; margin-bottom: 22px; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.18; margin-bottom: 18px; }
.accent { color: var(--orange); font-style: normal; font-weight: 700; }

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(5,6,12,0.8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--white); white-space: nowrap; }
.logo span { color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 24px; }
.back-link { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color .2s; }
.back-link:hover { color: var(--white); }

.btn {
  display: inline-block;
  background: var(--orange); color: #14100a;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; font-size: 0.85rem;
  padding: 13px 28px; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .3s var(--ease-soft), transform .35s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.btn::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn:hover { background: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(242,140,19,0.3); }
.btn:hover::after { left: 130%; }
.btn-lg { padding: 17px 38px; font-size: 1.02rem; }

.kicker {
  font-size: 0.92rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-dark); margin-bottom: 16px;
}
.kicker .num { color: var(--orange); }

.cs-hero { padding: 170px 0 70px; position: relative; overflow: hidden; }
.cs-hero::before {
  content: '';
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 560px;
  background: radial-gradient(ellipse at center, rgba(242,140,19,0.12) 0%, transparent 62%);
  pointer-events: none;
}
.cs-hero .sub { color: var(--muted); font-size: 1.15rem; max-width: 640px; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.chip {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 22px 20px;
}
.chip .val { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: var(--orange); line-height: 1.15; }
.chip .lbl { font-size: 0.8rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }

section { padding: 76px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

.x-list { list-style: none; max-width: 640px; }
.x-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; font-size: 1.02rem; color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}
.x-list li:last-child { border-bottom: none; }
.x-list .x { color: var(--red); font-weight: 700; flex-shrink: 0; }

.shot {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 14px 44px rgba(0,0,0,0.45);
}
.shot img { width: 100%; display: block; }
.shot-stack { display: grid; gap: 24px; }
.shot-caption { color: var(--muted-dark); font-size: 0.85rem; margin-top: 10px; text-align: center; }

.ba-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.ba-table th, .ba-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.ba-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-dark); font-weight: 600; }
.ba-table td { font-size: 1rem; color: var(--muted); }
.ba-table td.before { color: var(--red); }
.ba-table td.after { color: var(--green); font-weight: 600; }

.phase { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 34px 30px; margin-bottom: 18px; }
section.alt .phase { background: var(--bg); }
.phase .phase-num { font-family: var(--serif); font-style: italic; font-size: 2.2rem; font-weight: 500; color: var(--orange); line-height: 1; margin-bottom: 14px; }
.phase h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.phase .phase-tag { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; }
.phase ul { list-style: none; }
.phase li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 0.94rem; padding: 5px 0; }
.phase li::before { content: '→'; color: var(--orange); flex-shrink: 0; }

.final-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.final-grid .chip { text-align: center; padding: 30px 20px; }
.final-grid .chip .val { font-size: 2.2rem; }

.cta-box {
  text-align: center;
  background: linear-gradient(165deg, rgba(242,140,19,0.11) 0%, var(--surface) 55%);
  border: 1px solid rgba(242,140,19,0.45);
  border-radius: 28px;
  padding: 60px 40px;
}
.cta-box h2 { max-width: 640px; margin: 0 auto 16px; }
.cta-box p { color: var(--muted); font-size: 1.08rem; max-width: 560px; margin: 0 auto 32px; }
.cta-note { margin-top: 20px; font-size: 0.87rem; color: var(--muted-dark); }
.cta-note a { color: var(--muted); }

footer { border-top: 1px solid var(--border-soft); padding: 44px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-inner .fine { color: var(--muted-dark); font-size: 0.88rem; }
.footer-links { display: flex; gap: 26px; list-style: none; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { color: var(--white); }

.reveal {
  opacity: 0; transform: translateY(26px);
  will-change: opacity, transform;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.reveal-left { transform: translateX(-48px); }
.reveal.reveal-right { transform: translateX(48px); }
.reveal.reveal-left.visible, .reveal.reveal-right.visible { transform: none; }

/* Hover motion */
.chip, .shot, .quote-block, .approach-item, .phase {
  transition: transform .5s var(--ease-soft), border-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
  will-change: transform;
}
.chip:hover { border-color: rgba(242,140,19,0.4); transform: translateY(-4px); }
.shot:hover { box-shadow: 0 20px 54px rgba(0,0,0,0.55); }
.shot img { transition: transform .7s var(--ease-soft); }
.shot:hover img { transform: scale(1.02); }
.quote-block:hover { border-color: rgba(242,140,19,0.35); transform: translateY(-4px); }
.approach-item:hover { border-left-color: var(--orange); transform: translateX(4px); }
.tagpill { transition: transform .3s var(--ease-soft), border-color .3s var(--ease-soft); }
.tagpill:hover { transform: translateY(-2px); border-color: rgba(242,140,19,0.6); }
.prevnext a { display: inline-block; }
.prevnext a span { display: inline-block; transition: transform .35s var(--ease-soft); }
.back-link { display: inline-block; transition: transform .3s var(--ease-soft); }
.back-link:hover { transform: translateX(-3px); }
.logo { transition: opacity .3s var(--ease-soft); }
.logo:hover { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (hover: none) {
  .chip:hover, .quote-block:hover, .approach-item:hover { transform: none; }
}

@media (max-width: 800px) {
  .chips { grid-template-columns: 1fr 1fr; }
  .final-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cs-hero { padding: 140px 0 56px; }
  section { padding: 56px 0; }
  .final-grid { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr; }
  .ba-table th, .ba-table td { padding: 12px 10px; font-size: 0.9rem; }
  .cta-box { padding: 40px 22px; }
  .cta-box .btn-lg { width: 100%; max-width: 340px; margin: 0 auto; }
}

/* ===== Sinag-style article components ===== */
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tagpill {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--orange); background: rgba(242,140,19,0.09);
  border: 1px solid rgba(242,140,19,0.3); border-radius: 100px; padding: 5px 14px;
}
.summary-list { list-style: none; max-width: 680px; }
.summary-list li {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted); font-size: 1.02rem;
}
.summary-list li:last-child { border-bottom: none; }
.summary-list .check { color: var(--green); font-weight: 700; flex-shrink: 0; }
.summary-list strong { color: var(--white); font-weight: 600; }
.prose { color: var(--muted); font-size: 1.05rem; max-width: 680px; margin-bottom: 18px; }
.prose strong { color: var(--white); }
.goal-list { list-style: none; margin-top: 6px; }
.goal-list li { display: flex; gap: 10px; color: var(--muted); padding: 6px 0; }
.goal-list li::before { content: '→'; color: var(--orange); flex-shrink: 0; }
.approach-item { border-left: 2px solid rgba(242,140,19,0.35); padding: 4px 0 4px 26px; margin-bottom: 36px; }
.approach-item:last-child { margin-bottom: 0; }
.approach-item h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin-bottom: 10px; }
.approach-item h3 .no { color: var(--orange); font-style: italic; margin-right: 8px; }
.approach-item p { color: var(--muted); font-size: 1rem; margin-bottom: 10px; max-width: 640px; }
.approach-item ul { list-style: none; }
.approach-item li { display: flex; gap: 10px; color: var(--muted); font-size: 0.95rem; padding: 4px 0; }
.approach-item li::before { content: '→'; color: var(--orange); flex-shrink: 0; }
.quote-block {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius); padding: 36px 34px; max-width: 720px;
}
.quote-block blockquote { font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; margin-bottom: 16px; }
.quote-block .who { color: var(--muted-dark); font-size: 0.9rem; font-weight: 600; }
.prevnext {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft); padding-top: 34px;
}
.prevnext a { color: var(--muted); text-decoration: none; font-weight: 600; transition: color .3s var(--ease-soft), transform .3s var(--ease-soft); display: inline-block; }
.prevnext a:hover { color: var(--orange); }

/* ===== Case-study detail template ===== */

/* Client facts bar: industry, services, platform, period. */
.cs-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; margin-top: 40px;
}
.cs-facts div { background: var(--bg); padding: 20px 22px; }
.cs-facts dt {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-dark); margin-bottom: 6px;
}
.cs-facts dd { font-size: 0.98rem; font-weight: 600; color: var(--white); }

/* Sticky in-page section nav. */
.cs-nav {
  position: sticky; top: 76px; z-index: 40;
  background: rgba(5,6,12,0.9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.cs-nav ul {
  display: flex; gap: 30px; list-style: none;
  max-width: 1000px; margin: 0 auto; padding: 0 24px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cs-nav a {
  display: block; padding: 15px 0; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.cs-nav a:hover, .cs-nav a.active { color: var(--white); border-bottom-color: var(--orange); }

/* Results grouped by category. */
.res-group { margin-bottom: 34px; }
.res-group h3 {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-dark); font-weight: 600;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res-stat .rs-val {
  font-family: var(--serif); font-weight: 700;
  font-size: 2.4rem; line-height: 1; color: var(--orange);
  letter-spacing: -0.02em;
}
.res-stat .rs-lbl { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }

@media (max-width: 800px) {
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .res-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cs-facts { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .cs-nav ul { gap: 20px; }
  .res-stat .rs-val { font-size: 2rem; }
}


/* ===== Knox watermark on dashboard screenshots =====
   The Klaviyo dashboards are the proof assets, so each one carries the KR mark
   as a large centred watermark. Applied via ::after so it covers every .shot
   across all case studies without touching markup, and sits above the image so
   a screenshot of the screenshot still carries it.
   Corner placed, not centred: these captures exist to be read, and a large
   centred mark sat straight across the revenue figures. */
.shot { position: relative; }
.shot::after {
  content: "";
  position: absolute;
  right: 14px; bottom: 14px;
  width: 34px; height: 34px;
  background-image: url("assets/knox-badge.png");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  opacity: 0.92;
  pointer-events: none;
}
@media (max-width: 560px) {
  .shot::after { right: 9px; bottom: 9px; width: 26px; height: 26px; }
}

/* ===== Mobile header =====
   At 375px the full "Apply for an audit" label wrapped onto three lines and the
   back link onto two, so the bar looked stuffed. On small screens the back link
   collapses to its arrow and the button holds one line. */
@media (max-width: 640px) {
  .nav { height: 62px; }
  .logo { font-size: 1.12rem; }
  .nav-right { gap: 10px; }
  .back-link {
    font-size: 0;           /* hides the label text, link name stays for screen readers */
    line-height: 1;
    padding: 6px;
  }
  .back-link::before {
    content: "\2190";       /* left arrow */
    font-size: 1.35rem;
    color: var(--muted);
  }
  .back-link:hover::before { color: var(--white); }
  header .btn {
    white-space: nowrap;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 9px 14px;
  }
  .cs-hero { padding-top: 104px; }
  .cs-nav { top: 62px; }
}