/* ============================================================
   THE WALLS — case-study.css
   Shared styles for all case-study pages (lento, villa, clinic,
   office). Loaded AFTER style.css. Extracted from per-page inline
   <style> blocks to remove ~4x duplication.
   Page-specific overrides (hero image, placeholder-gallery tints,
   title clamps) remain in a small inline <style> on each page.
   ============================================================ */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;cursor:default}

.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 60px;transition:background var(--tr),padding var(--tr);border-bottom:.5px solid transparent}
nav.sc{background:rgba(12,12,11,.95);backdrop-filter:blur(12px);padding:16px 60px;border-bottom-color:rgba(201,169,110,.15)}
.nav-logo{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cream);letter-spacing:.12em;text-decoration:none}
.nav-logo span{color:var(--champagne)}
.nav-back{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-muted);text-decoration:none;display:flex;align-items:center;gap:10px;transition:color .25s}
.nav-back::before{content:'←';font-size:14px}
.nav-back:hover{color:var(--champagne)}
.nav-cta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);border:.5px solid var(--champagne-muted);padding:10px 24px;text-decoration:none;transition:all .3s}
.nav-cta:hover{background:var(--champagne);color:var(--obsidian)}

/* HERO */
.cs-hero{position:relative;height:92vh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.cs-hero-img{position:absolute;inset:0;background-size:cover;background-position:center 40%;background-color:var(--obsidian-3);transform:scale(1.04);animation:zhero 18s ease-in-out infinite alternate}
@keyframes zhero{from{transform:scale(1.04)}to{transform:scale(1.1)}}
.cs-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,11,.2) 0%,rgba(12,12,11,.15) 30%,rgba(12,12,11,.7) 70%,rgba(12,12,11,1) 100%)}
.cs-hero-content{position:relative;z-index:2;padding:0 60px 72px;width:100%}
.cs-crumb{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:12px;opacity:0;animation:fu .8s .3s ease forwards}
.cs-crumb::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.cs-title{font-family:var(--serif);font-size:clamp(52px,7vw,100px);font-weight:300;line-height:.92;color:var(--cream);max-width:760px;opacity:0;animation:fu .9s .5s ease forwards}
.cs-title em{font-style:italic;color:var(--champagne)}
.cs-meta-row{display:flex;gap:48px;margin-top:36px;opacity:0;animation:fu .8s .8s ease forwards;flex-wrap:wrap}
.cs-meta-item{}
.cs-meta-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-muted);margin-bottom:6px}
.cs-meta-val{font-size:15px;color:var(--cream)}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* CONTENT LAYOUT */
.cs-body{max-width:1200px;margin:0 auto;padding:0 60px}

/* OVERVIEW STRIP */
.cs-overview{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:80px 0;border-bottom:.5px solid rgba(201,169,110,.12)}
.cs-section-label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.cs-section-label::before{content:attr(data-n);color:var(--champagne-muted);font-size:9px}
.cs-h2{font-family:var(--serif);font-size:clamp(32px,3vw,48px);font-weight:300;line-height:1.1;color:var(--cream);margin-bottom:24px}
.cs-h2 em{font-style:italic;color:var(--champagne)}
.cs-p{font-size:14px;line-height:1.9;color:var(--gray-mid);margin-bottom:16px}
.cs-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--obsidian-4)}
.cs-stat{background:var(--obsidian-2);padding:28px 24px}
.cs-stat-num{font-family:var(--display);font-size:44px;color:var(--champagne);line-height:1}
.cs-stat-num sub{font-size:22px;color:var(--champagne-muted)}
.cs-stat-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-muted);margin-top:6px}

/* PHOTO GALLERY */
.cs-gallery{padding:60px 0}
.gallery-hero{width:100%;aspect-ratio:16/8;overflow:hidden;margin-bottom:3px;position:relative;cursor:pointer}
.gallery-hero img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tr)}
.gallery-hero:hover img{transform:scale(1.04)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:3px}
.gallery-thumb{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--tr)}
.gallery-thumb:hover img{transform:scale(1.08)}
.gallery-thumb::after{content:'';position:absolute;inset:0;background:rgba(12,12,11,0);transition:background .3s}
.gallery-thumb:hover::after{background:rgba(12,12,11,.25)}
.gallery-label{position:absolute;bottom:0;left:0;right:0;padding:20px 16px 16px;background:linear-gradient(to top,rgba(12,12,11,.85) 0%,transparent 100%);transform:translateY(4px);opacity:0;transition:all .3s}
.gallery-thumb:hover .gallery-label{opacity:1;transform:translateY(0)}
.gallery-label-text{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne)}
.gallery-hero-wide{width:100%;aspect-ratio:21/8;overflow:hidden;margin-bottom:3px;position:relative;cursor:pointer}
.gallery-hero-wide img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tr)}
.gallery-hero-wide:hover img{transform:scale(1.03)}

/* CHALLENGE / APPROACH */
.cs-two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:60px 0;border-top:.5px solid rgba(201,169,110,.12)}
.cs-challenge-block{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.12);padding:40px;position:relative;overflow:hidden}
.cs-challenge-block::before{content:attr(data-bg);position:absolute;top:-10px;right:-10px;font-family:var(--display);font-size:100px;color:rgba(201,169,110,.04);line-height:1;pointer-events:none}
.cs-tag{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);border:.5px solid rgba(201,169,110,.3);padding:5px 12px;margin-bottom:20px}

/* DELIVERABLES */
.cs-deliverables{padding:60px 0;border-top:.5px solid rgba(201,169,110,.12)}
.deliverables-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.deliverable-item{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.1);padding:20px 24px;display:flex;align-items:flex-start;gap:16px;transition:border-color .3s}
.deliverable-item:hover{border-color:rgba(201,169,110,.3)}
.deliverable-check{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.deliverable-check svg{width:20px;height:20px;stroke:var(--champagne);fill:none;stroke-width:1.5}
.deliverable-text{font-size:13px;color:var(--gray-mid);line-height:1.6}

/* MATERIALS */
.cs-materials{padding:60px 0;border-top:.5px solid rgba(201,169,110,.12)}
.materials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.material-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.1);padding:28px 20px;text-align:center;transition:border-color .3s}
.material-card:hover{border-color:rgba(201,169,110,.35)}
.material-swatch{width:48px;height:48px;margin:0 auto 16px;border:.5px solid rgba(201,169,110,.2)}
.material-name{font-family:var(--serif);font-size:16px;color:var(--cream);margin-bottom:6px}
.material-spec{font-size:11px;color:var(--gray-muted);letter-spacing:.08em}

/* RESULT STRIP */
.cs-result{background:var(--obsidian-2);border-top:.5px solid rgba(201,169,110,.15);border-bottom:.5px solid rgba(201,169,110,.15);padding:72px 0;margin:60px 0;text-align:center}
.cs-result-quote{font-family:var(--serif);font-size:clamp(22px,3vw,36px);font-weight:300;font-style:italic;line-height:1.4;color:var(--cream);max-width:680px;margin:0 auto 32px;padding:0 40px}
.cs-result-quote::before{content:'"';color:var(--champagne);font-size:60px;line-height:.5;display:block;margin-bottom:12px}
.cs-result-attr{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne-muted)}

/* NEXT PROJECT */
.cs-next{padding:72px 0 100px;display:flex;align-items:center;justify-content:space-between;border-top:.5px solid rgba(201,169,110,.12)}
.cs-next-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray-muted)}
.cs-next-title{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--cream);margin-top:8px}
.cs-next-title em{font-style:italic;color:var(--champagne)}
.cs-next-arrow{width:56px;height:56px;border:.5px solid var(--champagne-muted);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s}
.cs-next-arrow:hover{background:var(--champagne);border-color:var(--champagne)}
.cs-next-arrow svg{width:20px;height:20px;stroke:var(--champagne);fill:none;stroke-width:1.5;transition:stroke .3s}
.cs-next-arrow:hover svg{stroke:var(--obsidian)}

/* CTA */
.cs-cta{background:var(--obsidian-3);padding:80px 60px;text-align:center;margin:0 -60px;position:relative;overflow:hidden}
.cs-cta::before{content:'THE WALLS';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:160px;color:rgba(201,169,110,.03);white-space:nowrap;pointer-events:none}
.cs-cta h3{font-family:var(--serif);font-size:clamp(36px,4vw,60px);font-weight:300;color:var(--cream);margin-bottom:28px}
.cs-cta h3 em{font-style:italic;color:var(--champagne)}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:#25D366;color:white;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.btn-wa:hover{background:#1ebe59}
.btn-wa svg{width:18px;height:18px;fill:white}
.btn-out{display:inline-block;padding:14px 32px;border:.5px solid var(--champagne-muted);color:var(--champagne);font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .3s}
.btn-out:hover{background:var(--champagne);color:var(--obsidian)}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(12,12,11,.96);z-index:2000;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb-img{max-width:90vw;max-height:88vh;object-fit:contain}
.lb-close{position:absolute;top:28px;right:36px;font-size:28px;color:var(--champagne);cursor:pointer;line-height:1;background:none;border:none;transition:color .2s}
.lb-close:hover{color:var(--cream)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:.5px solid rgba(201,169,110,.3);color:var(--champagne);font-size:22px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s}
.lb-prev{left:28px}.lb-next{right:28px}
.lb-prev:hover,.lb-next:hover{background:var(--champagne);color:var(--obsidian);border-color:var(--champagne)}

/* REVEAL */
.rev{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rev.vis{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}

/* WA FLOAT */
.wa-float{position:fixed;bottom:90px;right:32px;z-index:500;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:white}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:wap 2.5s ease-in-out infinite}
@keyframes wap{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}

@media(max-width:768px){
  nav{padding:20px 20px}
  nav.sc{padding:14px 20px}
  .cs-hero-content{padding:0 20px 48px}
  .cs-body{padding:0 20px}
  .cs-overview,.cs-two-col{grid-template-columns:1fr;gap:40px}
  .cs-meta-row{flex-wrap:wrap;gap:28px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .materials-grid{grid-template-columns:1fr 1fr}
  .deliverables-grid{grid-template-columns:1fr}
  .cs-next{flex-direction:column;gap:28px;align-items:flex-start}
  .cs-cta{padding:60px 20px;margin:0 -20px}
}