/* ============================================================
   CASE STUDY — DESKTOP (1440px fixed canvas)
   Every value traced to Figma file kswfK4pEmcAqyCK11PqS1c
   ============================================================ */

:root{
  --brand-primary:#ff6600;
  --brand-orange-alt:#ff570a;
  --text-primary:#ffffff;
  --text-secondary:#35ff83;
  --green-title:#2eff99;
  --paper:#f7faff;
  --muted:#a6b8db;
  --blue-soft:#7eaee9;
  --page-bg:#080a29;
  --screen-bg:#0e1236;
  --panel-tint:rgba(126,174,233,0.14);
  --shadow-card:24.375px 33.75px 15px 0px rgba(0,0,0,0.25);
  --shadow-card-sm:16.875px 33.75px 15.188px 0px rgba(0,0,0,0.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--screen-bg);}
body{
  background:var(--screen-bg);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;border:0}
a{text-decoration:none;color:inherit}

/* ---------- canvas ---------- */
.case-canvas{
  position:relative;
  width:1440px;
  margin:0 auto;
  background:var(--page-bg);
  overflow:hidden;
}

/* ---------- navigation (shared, y0 h72) ---------- */
.case-nav{
  position:absolute;left:0;top:0;width:1440px;height:72px;
  background:rgba(126,174,233,0.14);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  z-index:40;
}
.case-nav .brand{
  position:absolute;left:80px;top:24px;
  font-size:20px;line-height:1.2;letter-spacing:0.6px;color:#fff;white-space:nowrap;
}
.case-nav .brand b{font-weight:800}
.case-nav .brand span{font-weight:700;color:var(--brand-primary)}
.case-nav .nav-links{
  position:absolute;right:80px;top:21.5px;height:29px;
  display:flex;align-items:flex-start;gap:48px;
}
.case-nav .nav-link{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-weight:700;font-size:16px;line-height:normal;color:#fff;white-space:nowrap;
  cursor:pointer;background:none;border:0;font-family:inherit;
}
.case-nav .nav-link u-bar,
.case-nav .nav-link .u-bar{display:block;height:2px;width:100%;background:transparent;transition:background .18s ease}
.case-nav .nav-link:hover{color:var(--brand-primary)}
.case-nav .nav-link:hover .u-bar{background:var(--brand-primary)}
.case-nav .nav-link.is-active{color:var(--brand-primary)}
.case-nav .nav-link.is-active .u-bar{background:var(--brand-primary)}

/* ---------- content shell ---------- */
.case-content{position:absolute;left:0;top:72px;width:1440px;background:var(--page-bg)}

/* ---------- primitives ---------- */
.abs{position:absolute}

.back-hit{position:absolute;display:block}
.back-link{
  position:absolute;
  font-style:italic;font-weight:400;font-size:26.119px;line-height:normal;
  color:var(--brand-primary);transition:color .18s ease;
}
.back-hit .u-bar{position:absolute;left:0;height:3.75px;width:100%;
  background:transparent;transition:background .18s ease}
.back-hit:hover .u-bar,
.back-hit:focus-visible .u-bar{background:var(--brand-primary)}
.back-hit:hover .back-link{color:#ff8a3d}

.eyebrow{font-weight:700;font-size:30px;line-height:1.25;color:var(--green-title);white-space:pre-wrap}
.eyebrow .o{color:var(--brand-primary)}
.eyebrow .w{color:#fff}

.case-headline{font-weight:700;font-size:76px;line-height:1.08;color:var(--paper)}
.case-headline .o{color:var(--brand-primary)}

.case-sub{font-weight:500;font-size:30px;line-height:1.43;color:var(--muted)}
.case-sub .hl{font-weight:800;font-style:italic;color:var(--text-secondary)}

.hero-frame{border-radius:18px;overflow:hidden;position:absolute}
.hero-frame img{position:absolute;max-width:none}

/* ---------- proof stats ---------- */
.proof-card{position:absolute;border-radius:16px;overflow:hidden}
.proof-value{position:absolute;font-family:'Racing Sans One',cursive;font-weight:400;font-style:normal;font-size:37.5px;line-height:1.25}
.proof-label{position:absolute;font-weight:700;font-size:22.5px;line-height:1.25;color:#fff}
.proof-label .g{color:var(--text-secondary)}
.proof-label .tight{letter-spacing:-1.8px}
.proof-label p+p{margin-top:11.25px}

/* ---------- win module ---------- */
.win{position:absolute;border-radius:18px}
.win-title{position:absolute;font-family:'Racing Sans One',cursive;font-weight:400;font-size:37.5px;line-height:1.25}
.win-body{position:absolute;font-weight:700;font-size:35.494px;line-height:1.15;color:var(--paper)}
.win-body .n{font-weight:900;font-size:45px;color:var(--text-secondary)}
.win-body .xb{font-weight:800;font-size:39.375px}
.win-body .b{font-weight:700;font-size:39.375px}

/* ---------- brief / ownership / system ---------- */
.mod{position:absolute;border-radius:16px}
.mod-title{position:absolute;font-weight:700;font-size:19.5px;line-height:1.25;letter-spacing:1.95px;color:var(--green-title);text-transform:uppercase}
.mod-body{position:absolute;font-weight:500;font-size:19.744px;line-height:1.45;color:var(--paper)}

/* ---------- gallery ---------- */
.gal-title{position:absolute;font-weight:700;font-size:76px;line-height:1.08;color:var(--paper)}
.gal-sub{position:absolute;font-weight:500;font-size:30px;line-height:1.43;color:var(--muted)}
.gal-tile{position:absolute;border-radius:18px;overflow:hidden}
.gal-tile img{position:absolute;max-width:none}

/* ---------- next project card ---------- */
.next-card{
  position:absolute;display:block;
  background:rgba(255,102,0,0.3);border-radius:9.6px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, background .2s ease;
}
.next-card:hover{background:rgba(255,102,0,0.42);transform:translateY(-2px)}
.next-eyebrow{position:absolute;font-weight:700;letter-spacing:1.95px;line-height:1.25}
.next-eyebrow .lbl{font-size:19.5px;color:var(--brand-primary)}
.next-eyebrow .nm{font-size:10.4px;color:#fff;letter-spacing:1.04px}
.next-title{position:absolute;font-weight:700;font-size:35.49px;line-height:1.15;color:var(--paper)}
.next-btn{
  position:absolute;background:var(--text-secondary);border-radius:7px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Racing Sans One',cursive;font-size:30px;line-height:normal;
  color:#0e1236;text-align:center;white-space:nowrap;
}

/* ---------- case footer ---------- */
.case-footer{
  position:absolute;background:rgba(53,255,131,0.17);border-radius:9.6px;
  box-shadow:var(--shadow-card);overflow:hidden;
}
.cf-pitch{position:absolute;left:30px;top:28px;width:550px;color:var(--paper)}
.cf-pitch .p1{font-style:italic;font-weight:400;font-size:30px;line-height:normal}
.cf-pitch .p2{font-weight:700;font-size:30px;line-height:normal;color:var(--text-secondary)}
.cf-link{position:absolute;font-weight:700;font-size:19.5px;line-height:1.25;letter-spacing:1.95px;color:var(--paper)}
.cf-link.is-green{color:var(--green-title)}
.cf-link.is-resume{color:#fff}
/* one anchor per destination; ::before enlarges the touch target without
   changing the element box, ::after is the hover underline under the text */
.cf-link::before{content:"";position:absolute;left:0;right:0;top:-29px;height:82.5px}
.cf-link::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 2px);
  height:3.75px;background:transparent;transition:background .18s ease}
.cf-link:hover::after,.cf-link:focus-visible::after{background:var(--text-secondary)}

.case-copyright{position:absolute;font-weight:500;font-size:22.5px;line-height:1.3;color:var(--blue-soft);white-space:nowrap}

/* ---------- accessibility ---------- */
.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;
}
/* A skip link that never becomes visible is a keyboard trap: it can be tabbed
   to but never seen. Reveal it on focus, matching the tablet/mobile treatment. */
.sr-only:focus{
  position:absolute;left:16px;top:16px;width:auto;height:auto;
  padding:10px 18px;margin:0;overflow:visible;clip:auto;
  background:#35ff83;color:#0e1236;border-radius:6px;
  font-weight:700;font-size:16px;z-index:100;
}
:focus-visible{outline:3px solid var(--text-secondary);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0ms !important;animation-duration:0ms !important}
}