/* ============================================================
   Credo Studio — shared stylesheet (all pages)
   ============================================================ */
:root{
  --brown:#241a14; --brown2:#2c2018; --cream:#efe7db; --cream2:#f6f1e8;
  --clay:#e0552b; --clay2:#f0794a; --muted:#b6a692; --inkmuted:#8c7a67;
  --line:rgba(239,231,219,.16); --linedark:rgba(36,26,20,.12);
  --geo:"Futura","Avenir Next","Century Gothic","Poppins",system-ui,Arial,sans-serif;
  --serif:"Hoefler Text","Baskerville",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html:not(.js){scroll-behavior:smooth}
body{background:var(--brown); color:var(--cream); font-family:var(--geo);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5}
img{display:block; max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 46px}
.clay{color:var(--clay)} .out{color:transparent;-webkit-text-stroke:1.6px currentColor}
a{color:inherit; text-decoration:none}
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px}
.eyebrow .sq{width:8px;height:8px;background:var(--clay);border-radius:2px}

/* ---------- NAV ---------- */
nav.bar{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; padding:26px 46px}
nav.bar.solid{position:sticky; background:rgba(36,26,20,.86); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:25px; letter-spacing:-.02em}
.logo .d{width:12px;height:12px;border-radius:50%;background:var(--clay)}
.navlinks{display:flex; align-items:center; gap:32px; font-size:13px}
.navlinks a{opacity:.85} .navlinks a:hover{opacity:1}
.btn{background:var(--clay); color:#fff; padding:12px 22px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:inherit}
.btn:hover{background:var(--clay2)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--cream)}
.btn.big{padding:16px 34px; font-size:14px}

/* ---------- MARQUEE ---------- */
.strip{background:var(--clay); color:#fff; padding:16px 0; overflow:hidden; white-space:nowrap}
.strip .row{display:inline-flex; gap:44px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.strip span{opacity:.85}

/* ---------- SECTION SHELL ---------- */
section{position:relative}
.pad{padding:110px 0}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:52px}
.sechead h2{font-weight:700; letter-spacing:-.02em; line-height:1; font-size:clamp(34px,4.6vw,60px); text-transform:lowercase}
.sechead p{max-width:360px; color:var(--muted); font-size:15px}
.num{color:var(--clay); font-weight:700; font-size:13px; letter-spacing:.2em}

/* ---------- FOOTER ---------- */
footer{background:var(--brown); padding:56px 0 34px; border-top:1px solid var(--line)}
.fgrid{display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap}
.fcol h4{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.fcol a{display:block; font-size:14px; color:#d8cdbe; margin-bottom:10px}
.fcol a:hover{color:var(--clay)}
.fbottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line);
  margin-top:44px; padding-top:22px; font-size:12.5px; color:var(--muted); letter-spacing:.06em}

/* ---------- SCROLL REVEAL ---------- */
html.js [data-reveal]{opacity:0; transform:translateY(30px); will-change:opacity,transform}
html.js [data-reveal].in{opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}

/* ---------- CUSTOM CURSOR + MAGNETIC ---------- */
html.cursor-on, html.cursor-on *{cursor:none !important}
.cur-dot,.cur-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference; opacity:0; transition:opacity .3s}
html.cursor-on .cur-dot,html.cursor-on .cur-ring{opacity:1}
.cur-dot{width:7px; height:7px; background:#fff; margin:-3.5px 0 0 -3.5px}
.cur-ring{width:40px; height:40px; border:1px solid #fff; margin:-20px 0 0 -20px;
  transition:width .25s ease, height .25s ease, margin .25s ease, opacity .3s, background .25s}
html.cur-hover .cur-ring{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,255,255,.12)}
.magnetic{display:inline-block; will-change:transform}

/* ---------- SOUND TOGGLE ---------- */
.soundtoggle{position:fixed; z-index:40; left:24px; bottom:22px; display:flex; align-items:center; gap:11px;
  background:rgba(36,26,20,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(239,231,219,.2); color:var(--cream); padding:10px 16px 10px 13px; border-radius:999px;
  font-family:var(--geo); font-size:11px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  transition:border-color .3s, background .3s}
.soundtoggle:hover{border-color:rgba(224,85,43,.7)}
.soundtoggle .eq{display:flex; align-items:flex-end; gap:2.5px; height:15px}
.soundtoggle .eq i{width:2.5px; height:5px; background:var(--clay); border-radius:1px; transform-origin:bottom}
.soundtoggle.on .eq i{animation:eq .9s ease-in-out infinite}
.soundtoggle.on .eq i:nth-child(2){animation-delay:.15s}
.soundtoggle.on .eq i:nth-child(3){animation-delay:.3s}
.soundtoggle.on .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(2.6)}}
.soundtoggle .lbl::after{content:"Sound off"}
.soundtoggle.on .lbl::after{content:"Sound on"}

/* ============================================================
   CASE STUDY PAGES (.cs-*)
   ============================================================ */
.backlink{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.backlink:hover{color:var(--clay)}
.cs-hero{padding:150px 0 60px; position:relative; overflow:hidden;
  background:radial-gradient(60% 80% at 85% 0%, rgba(224,85,43,.16), rgba(36,26,20,0) 60%), var(--brown)}
.cs-hero .tagrow{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 26px}
.cs-hero .tagrow span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
  border:1px solid var(--line); padding:7px 14px; border-radius:999px}
.cs-title{font-weight:700; letter-spacing:-.03em; line-height:.96; font-size:clamp(46px,7.2vw,104px); text-transform:lowercase}
.cs-sub{max-width:560px; margin-top:24px; font-size:18px; color:#ddd2c3}
.cs-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px;
  border-top:1px solid var(--line); padding-top:28px}
.cs-meta .k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.cs-meta .v{font-size:15px; color:var(--cream); line-height:1.5}
.cs-cover{margin:60px 0 0; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.cs-cover img{width:100%; display:block}
.cs-block{padding:96px 0}
.cs-block.light{background:var(--cream); color:var(--brown)}
.cs-block.light .eyebrow{color:var(--inkmuted)}
.cs-two{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.cs-two h2{font-weight:700; letter-spacing:-.02em; line-height:1.05; font-size:clamp(28px,3.6vw,46px); text-transform:lowercase}
.cs-two p{font-size:16.5px; margin-bottom:16px; max-width:560px}
.cs-block.light .cs-two p{color:#5c4b3b}
.cs-block p.lead-p{font-size:16.5px; color:#d8cdbe; max-width:620px; margin-bottom:16px}
.cs-list{list-style:none; margin-top:18px}
.cs-list li{padding:14px 0; border-top:1px solid var(--linedark); display:flex; gap:14px; font-size:15.5px}
.cs-list li b{color:var(--clay)}
.cs-shot{margin:0; overflow:hidden}
.cs-shot img{width:100%; display:block}
.cs-shot.round{border-radius:18px; border:1px solid var(--line)}
.cs-grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.cs-quote{padding:110px 0; text-align:center; background:var(--clay); color:#fff}
.cs-quote blockquote{font-family:var(--serif); font-size:clamp(24px,3.4vw,40px); line-height:1.28;
  max-width:900px; margin:0 auto; font-style:italic}
.cs-quote .who{margin-top:28px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; opacity:.9}
.cs-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:20px}
.cs-stats b{display:block; font-size:clamp(38px,5vw,64px); font-weight:700; letter-spacing:-.02em; color:var(--clay)}
.cs-stats span{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--inkmuted)}
.cs-next{padding:90px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px}
.cs-next .lab{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.cs-next .nm{font-weight:700; letter-spacing:-.02em; font-size:clamp(28px,4vw,52px); text-transform:lowercase}
.cs-next .nm:hover{color:var(--clay)}

/* ---------- SHARED RESPONSIVE ---------- */
@media(max-width:820px){
  .navlinks{display:none} .wrap{padding:0 24px} nav.bar{padding:20px 24px}
  .sechead{flex-direction:column; align-items:flex-start}
  .soundtoggle{left:16px; bottom:16px; padding:9px 13px}
  .cs-meta{grid-template-columns:1fr 1fr; gap:20px} .cs-two{grid-template-columns:1fr; gap:28px}
  .cs-grid2{grid-template-columns:1fr} .cs-stats{grid-template-columns:1fr}
  .cs-next{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .soundtoggle.on .eq i{animation:none}
  html.js [data-reveal]{opacity:1; transform:none}
}