@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F5F7FA;
  --bg-white:#FFFFFF;
  --white:#FFFFFF;
  --blue:#325FEC;
  --blue-light:#1a4fd6;
  --text:#111111;
  --text-mid:#444444;
  --text-muted:#666666;
  --border:#E0E0E0;
  --border-light:#EEEEEE;
  --serif:'Playfair Display',serif;
  --sans:'Inter',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;opacity:0;animation:fadeIn 0.4s ease forwards}
@keyframes fadeIn{to{opacity:1}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* NAV */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 44px;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);z-index:100}
.nav-logo{font-family:var(--serif);font-size:15px;letter-spacing:0.02em;color:var(--text)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-back{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:#444}

/* HERO BANNER */
.cs-hero-img{width:100%;height:520px;object-fit:cover;display:block}

/* TAGS */
.tag{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:0.5px solid var(--blue);color:var(--blue);display:inline-block;background:#EEF2FF}

/* SECTION LABELS */
.section-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
.section-title{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--text);margin-bottom:16px;line-height:1.25}
.body-text{font-size:15px;line-height:1.9;color:var(--text-muted);max-width:720px}

/* CASE STUDY LAYOUT */
.cs-wrap{max-width:1200px;margin:0 auto}
.cs-hero{padding:64px 72px 52px;background:var(--bg-white);border-bottom:0.5px solid var(--border)}
.cs-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.cs-hero-title{font-family:var(--serif);font-size:56px;font-weight:400;line-height:1.1;color:var(--text);margin-bottom:20px;max-width:800px}
.cs-hero-subtitle{font-size:16px;line-height:1.85;color:var(--text-muted);max-width:680px;margin-bottom:40px}
.cs-stats{display:flex;gap:40px;padding-top:28px;border-top:0.5px solid var(--border);flex-wrap:wrap}
.cs-stat-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.cs-stat-value{font-family:var(--serif);font-size:15px;color:var(--text)}

/* SECTIONS */
.cs-section{padding:64px 72px;border-bottom:0.5px solid var(--border);background:var(--bg-white)}
.cs-section:nth-child(even){background:var(--bg)}

/* IMAGES */
.full-img{width:100%;border-radius:8px;display:block;margin-top:24px;border:0.5px solid var(--border)}
.full-img.clickable{cursor:zoom-in;transition:transform 0.2s,box-shadow 0.2s}
.full-img.clickable:hover{transform:scale(1.005);box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:24px}

/* BEFORE/AFTER */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.ba-card{border-radius:8px;overflow:hidden;border:0.5px solid var(--border);background:#fff}
.ba-card img{width:100%;height:320px;display:block;object-fit:cover;cursor:zoom-in;transition:opacity 0.2s}
.ba-card img:hover{opacity:0.9}
.ba-label{padding:12px 16px;background:#f8f9fb;border-top:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.ba-label .before{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#999}
.ba-label .after{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);font-weight:500}
.ba-label .sub{font-size:11px;color:#aaa}
.ba-label .sub-after{font-size:11px;color:var(--blue);opacity:0.7}

/* SCOPE */
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.scope-item{background:#EEF2FF;border:0.5px solid #D0D9FF;border-radius:8px;padding:14px 18px;font-size:13px;color:#333;display:flex;align-items:center;gap:12px}
.scope-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.scope-item.full{grid-column:span 2}

/* BOTTOM NAV */
.cs-nav-bottom{padding:28px 72px;display:flex;justify-content:space-between;align-items:center;background:var(--bg-white);border-top:0.5px solid var(--border)}
.cs-nav-bottom a{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s}
.cs-nav-bottom a:hover{opacity:0.7}
.cs-nav-bottom .prev{color:#999}
.cs-nav-bottom .next{color:var(--blue);font-weight:500}

/* COMING SOON */
.coming-soon{margin-top:20px;border-radius:8px;border:0.5px solid #D0D9FF;background:#EEF2FF;padding:18px 22px;display:flex;align-items:center;gap:16px}
.coming-badge{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--blue);color:#fff;white-space:nowrap;flex-shrink:0}
.coming-text{font-size:13px;color:#444;line-height:1.6}
.coming-text strong{color:var(--blue)}

/* FOOTER */
.site-footer{padding:24px 44px;background:var(--bg-white);border-top:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.footer-name{font-family:var(--serif);font-size:13px;color:var(--text-muted)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);transition:color 0.2s}
.footer-links a:hover{color:var(--blue)}

/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px}
.lightbox-close{position:fixed;top:20px;right:28px;font-size:32px;color:#fff;cursor:pointer;line-height:1;opacity:0.8}
.lightbox-close:hover{opacity:1}

/* MOBILE */
@media(max-width:768px){
  .site-nav{padding:16px 20px}
  .nav-links{display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:#fff;padding:20px;gap:20px;border-bottom:0.5px solid var(--border)}
  .nav-links.open{display:flex}
  .nav-hamburger{display:flex}
  .cs-hero{padding:32px 20px 28px}
  .cs-hero-title{font-size:34px}
  .cs-section{padding:36px 20px}
  .section-title{font-size:24px}
  .cs-stats{gap:20px}
  .grid-2,.grid-3,.ba-grid,.scope-grid{grid-template-columns:1fr}
  .scope-item.full{grid-column:span 1}
  .cs-nav-bottom{padding:20px}
  .site-footer{padding:20px;flex-direction:column;gap:12px;text-align:center}
  .cs-hero-img{height:260px}
}

/* LIGHTBOX JS SHARED */