:root{
  --bg:#050302;--surface:#0E0908;--elevated:#1C1310;
  --amber:#D4A45C;--amber-dim:rgba(212,164,92,0.18);--pink:#E8547A;
  --cream:rgba(245,237,223,0.85);--cream-dim:rgba(245,237,223,0.55);--white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--cream);font-family:'Inter',sans-serif;overflow-x:hidden;}

/* NAV, same position/style as index.html's nav, plus a working back link */
.cs-nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 44px;
  mix-blend-mode:difference;
}
.cs-nav-back{
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);text-decoration:none;
  display:flex;align-items:center;gap:8px;
  transition:color .3s;
}
.cs-nav-back:hover{color:var(--amber);}
.cs-nav-name{font-size:13px;letter-spacing:0.06em;color:rgba(255,255,255,0.85);}

/* HERO, shared across all five case studies */
.cs-hero{
  min-height:100vh;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 7vw 10vh;
  overflow:hidden;
}
.cs-hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:0.75;z-index:0;}
.cs-hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,3,2,0.2) 0%,transparent 40%,rgba(5,3,2,0.85) 100%);
}
.cs-hero-eyebrow{
  position:relative;z-index:2;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;
}
.cs-hero-title{
  position:relative;z-index:2;
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,8vw,6.5rem);
  color:var(--white);line-height:0.98;margin-bottom:20px;
}
.cs-hero-sub{
  position:relative;z-index:2;
  font-size:clamp(14px,1.2vw,17px);
  color:var(--cream-dim);max-width:560px;line-height:1.6;
}

/* SECTION, shared block used for every content section on every page */
.cs-section{
  padding:14vh 7vw;
  max-width:900px;
}
.cs-section-label{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:18px;
}
.cs-section-heading{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  color:var(--white);margin-bottom:24px;line-height:1.15;
}
.cs-section p,
.cs-closing p{
  font-size:clamp(15px,1.1vw,17px);
  color:var(--cream);line-height:1.75;margin-bottom:20px;
  max-width:680px;
}
.cs-section-visual{
  width:100%;border-radius:16px;overflow:hidden;margin:32px 0;
  border:1px solid rgba(212,164,92,0.14);
}
.cs-section-visual img,.cs-section-visual video{width:100%;display:block;}
.cs-cta{
  color:var(--amber);font-size:13px;letter-spacing:0.06em;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(212,164,92,0.4);padding-bottom:2px;
  transition:opacity .3s;
}
.cs-cta:hover{opacity:0.7;}

/* CLOSING, shared closer block, links back to portfolio */
.cs-closing{
  padding:16vh 7vw 18vh;
  border-top:1px solid rgba(212,164,92,0.1);
}
.cs-closing-cta-row{display:flex;gap:32px;flex-wrap:wrap;margin-top:28px;}

/* REVEAL SYSTEM, same fly-up pattern as index.html's .fly.up */
.cs-fly{
  opacity:0;transform:translateY(40px);
  transition:opacity .85s cubic-bezier(0.2,0.8,0.2,1),transform .85s cubic-bezier(0.2,0.8,0.2,1);
}
.cs-fly.in-view{opacity:1;transform:translateY(0);}

/* READING PROGRESS, thin top bar driven by [data-progress] */
.cs-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:400;
  pointer-events:none;background:transparent;
}
.cs-progress::after{
  content:'';
  display:block;height:100%;width:var(--cs-progress,0%);
  background:var(--amber);
  transition:width .1s linear;
}

/* PAGE TRANSITION OVERLAY, used on the way in from index.html */
#cs-page-transition{
  position:fixed;inset:0;z-index:999;background:var(--bg);
  opacity:1;pointer-events:none;
  transition:opacity .5s ease;
}
#cs-page-transition.hide{opacity:0;}

@media (max-width:820px){
  .cs-nav{padding:16px 18px;}
  .cs-nav-name{font-size:12px;}
  .cs-nav-back{font-size:12px;padding:10px 0;}
  .cs-hero{padding:0 20px 8vh;}
  .cs-hero-title{
    font-size:clamp(2.35rem,11vw,3.4rem)!important;
    line-height:1.05;
  }
  .cs-hero-sub,
  .cs-section p,
  .cs-closing p{
    font-size:16px!important;
    line-height:1.7!important;
    max-width:none!important;
  }
  .cs-section-label{font-size:11px;margin-bottom:14px;}
  .cs-section-heading{
    font-size:clamp(1.65rem,7.2vw,2.2rem)!important;
    line-height:1.18;
    margin-bottom:18px;
  }
  .cs-section{padding:11vh 20px;}
  .cs-closing{padding:12vh 20px 16vh;}
  .cs-cta{
    font-size:14px;
    padding:14px 22px;
  }
  .cs-closing-cta-row{gap:12px;flex-direction:column;}
  .cs-closing-cta-row .cs-cta{width:100%;justify-content:center;}
}