/* ThornWerks Design — Case Study Shared Styles */

:root {
  --white:  #FFFFFF;
  --bg:     #F6F3F1;
  --ink:    #1A1A1A;
  --ink-2:  #666666;
  --ink-3:  #999999;
  --border: #E2DDD9;
  --ac:     #FFC89F;
  --ff-h:   'Plus Jakarta Sans', sans-serif;
  --ff-b:   'Plus Jakarta Sans', sans-serif;
  --nav-h:  64px;
  --max:    1160px;
  --gut:    clamp(20px,4vw,48px);
  --ease:   cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--ff-b);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:13px 26px;transition:.2s var(--ease)}
.btn svg{flex-shrink:0;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--dark{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.btn--dark:hover{opacity:.8}
.btn--ghost{border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7);font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;padding:13px 26px;transition:.2s var(--ease)}
.btn--ghost:hover{border-color:rgba(255,255,255,.85);color:#fff}
.btn--ghost svg{flex-shrink:0;transition:transform .2s var(--ease)}
.btn--ghost:hover svg{transform:translateX(3px)}

/* ── NAV ── */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav.on{background:rgba(246,243,241,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav__row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--gut)}
.nav__logo{display:flex;align-items:center;gap:10px}
.nav__logo-icon{height:28px;width:auto;filter:invert(1);transition:filter .3s}
.nav.on .nav__logo-icon{filter:none}
.nav__wordmark{font-family:var(--ff-h);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;transition:color .3s}
.nav.on .nav__wordmark{color:var(--ink)}
.nav__links{display:flex;gap:36px}
.nav__links a{font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .18s}
.nav__links a:hover{color:#fff}
.nav.on .nav__links a{color:var(--ink-2)}
.nav.on .nav__links a:hover{color:var(--ink)}
.nav__cta{font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.55);padding:9px 18px;transition:color .18s,border-color .18s,background .18s}
.nav__cta:hover{border-color:rgba(255,255,255,.9)}
.nav.on .nav__cta{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.on .nav__cta:hover{opacity:.8}
.nav__hbg{display:none;background:none;border:none;padding:8px;flex-direction:column;gap:5px}
.nav__hbg span{display:block;width:22px;height:1.5px;background:#fff;transition:.22s}
.nav.on .nav__hbg span{background:var(--ink)}
.nav__drawer{display:none;position:fixed;inset:var(--nav-h) 0 0;background:var(--bg);flex-direction:column;padding:40px var(--gut);gap:24px;z-index:99;border-top:1px solid var(--border)}
.nav__drawer.open{display:flex}
.nav__drawer a{font-family:var(--ff-h);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* ── CASE STUDY HERO ── */
.cs-hero{min-height:55svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.cs-hero--plain{background:var(--ink);min-height:40svh}
.cs-hero__media{position:absolute;inset:0;z-index:0}
.cs-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.cs-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(26,26,26,.92) 0%,rgba(26,26,26,.55) 50%,rgba(26,26,26,.15) 100%)}
.cs-hero__inner{position:relative;z-index:2;width:100%;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:calc(var(--nav-h) + 48px) var(--gut) clamp(48px,6vw,80px)}
.cs-hero__client{font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:16px}
.cs-hero__h1{font-family:var(--ff-h);font-size:clamp(24px,4vw,52px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:#fff;max-width:820px}

/* ── CONTENT ── */
.cs-content{background:var(--bg);padding-bottom:clamp(64px,8vw,112px)}
.cs-wrap{max-width:760px;margin:0 auto;padding:0 var(--gut)}

.cs-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:28px 0;transition:color .18s}
.cs-back:hover{color:var(--ink)}
.cs-back svg{transition:transform .2s var(--ease)}
.cs-back:hover svg{transform:translateX(-3px)}

.cs-answer{background:var(--white);border-left:3px solid var(--ac);padding:24px 28px;margin-bottom:48px}
.cs-answer__lbl{font-family:var(--ff-h);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.cs-answer p{font-size:15px;font-weight:400;line-height:1.8;color:var(--ink)}

.cs-story{margin-bottom:56px}
.cs-story p{font-size:16px;font-weight:300;line-height:1.85;color:var(--ink-2);margin-bottom:18px}
.cs-story p:last-child{margin-bottom:0}

.cs-delivered{border-top:1px solid var(--border);padding-top:40px}
.cs-delivered__lbl{font-family:var(--ff-h);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chip{font-family:var(--ff-h);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--border);padding:8px 14px;background:var(--white)}

/* ── CTA ── */
.cs-cta{background:var(--ink);padding:clamp(56px,7vw,96px) var(--gut);text-align:center}
.cs-cta__lbl{font-family:var(--ff-h);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px}
.cs-cta__t{font-family:var(--ff-h);font-size:clamp(26px,3.5vw,44px);font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:32px;line-height:1.1}
.cs-cta__btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

/* ── FOOTER ── */
.footer{border-top:1px solid var(--border);padding:44px 0 32px;background:var(--bg)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:36px;flex-wrap:wrap;margin-bottom:44px}
.footer-brand{max-width:240px}
.footer-wordmark{font-family:var(--ff-h);font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:12px}
.footer-tag{font-size:13px;font-weight:300;color:var(--ink-3);line-height:1.7}
.fcol-t{font-family:var(--ff-h);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.fcol-l{display:flex;flex-direction:column;gap:9px}
.fcol-l a{font-size:13px;font-weight:300;color:var(--ink-2);transition:color .18s}
.fcol-l a:hover{color:var(--ink)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:var(--ink-3)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .nav__links,.nav__cta{display:none}
  .nav__hbg{display:flex}
}
@media(max-width:600px){
  .cs-cta__btns{flex-direction:column;align-items:stretch}
  .cs-cta__btns .btn,.cs-cta__btns .btn--ghost{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}