/* 1NORTH — case studies page (builds on site.css) */

.topbar nav a.active::after{transform:translateX(-50%) scaleX(1)}

/* ---------- Hero ---------- */
.cx-hero{position:relative;background:var(--red);color:var(--white);padding:clamp(130px,18vh,200px) var(--gutter) 0;overflow:hidden}
.cx-eyebrow{margin-bottom:24px}
.cx-title{font-size:clamp(64px,12.4vw,210px);line-height:.8}
.cx-title .line{display:block}
.cx-title .line:first-child{transform:rotate(-2deg);transform-origin:left bottom}
.cx-title em{font-style:normal;color:var(--ink)}
.cx-sub{max-width:560px;margin-top:clamp(24px,4vh,40px);font-size:clamp(17px,1.4vw,21px);line-height:1.45;font-weight:500}
.cx-stats{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,5vh,48px)}
.cx-stats li{display:flex;align-items:baseline;gap:10px;padding:12px 20px;background:var(--ink);color:var(--white)}
.cx-stats b{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.cx-stats span{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cx-band{margin:clamp(56px,10vh,120px) calc(var(--gutter) * -1) 0;padding:clamp(90px,13vh,150px) var(--gutter) clamp(30px,5vh,60px);background:var(--ink);border-radius:50% 50% 0 0 / clamp(70px,10vw,170px) clamp(70px,10vw,170px) 0 0}
.cx-band .eyebrow{color:var(--grey);margin-bottom:18px}
.cx-index{list-style:none;border-top:2px solid var(--white)}
.ix-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto 48px;gap:20px;align-items:center;padding:18px 0;border-bottom:2px solid rgba(255,255,255,.22);text-decoration:none;transition:padding .35s var(--ease)}
.ix-row:hover{padding-left:14px}
.ix-n{font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--grey)}
.ix-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.ix-name b{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,56px);line-height:.9;text-transform:uppercase}
.ix-name span{font-size:16px;color:var(--grey)}
.ix-views{display:flex;align-items:baseline;gap:8px}
.ix-views b{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,56px);line-height:.9;color:var(--red)}
.ix-views small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ix-go{display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--white);border-radius:var(--round);font-size:20px;transition:background .2s,color .2s,transform .3s var(--ease)}
.ix-row:hover .ix-go{background:var(--red);border-color:var(--red);transform:translateY(4px)}

/* ---------- One case study ---------- */
.cs{position:relative;background:var(--ink);color:var(--white);padding:clamp(100px,14vh,170px) var(--gutter);overflow:hidden;--muted:#B8B5AE;--body:#D9D5CD;--rule:rgba(255,255,255,.18)}
.cs-light{background:var(--white);color:var(--ink);--muted:#5A5852;--body:#2A2A2A;--rule:rgba(10,10,10,.16)}
.cs-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.cs-num{grid-row:1/span 3;font-family:var(--display);font-size:clamp(96px,15vw,250px);line-height:.76;color:transparent;-webkit-text-stroke:2px var(--red)}
.cs-kicker{color:var(--red)}
.cs-title{font-size:clamp(46px,7vw,118px);line-height:.84}
.cs-client{display:block;font-size:.42em;line-height:1;margin-bottom:.12em;color:var(--muted)}
.cs-lead{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.2vw,34px);line-height:1;color:var(--red);margin-top:10px}
.cs-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.cs-media{position:relative;margin:0}
.cs-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--plate)}
.cs-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-sound{position:absolute;right:14px;bottom:14px;padding:9px 14px;border-radius:var(--round);background:rgba(10,10,10,.78);color:var(--white);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.cs-sound:hover{background:var(--red)}
.cs-sound .off,.cs-sound[aria-pressed="true"] .on{display:none}
.cs-sound[aria-pressed="true"] .off{display:inline}
.cs-views{position:absolute;z-index:3;top:-20px;left:-14px;display:flex;flex-direction:column;padding:12px 20px 13px;background:var(--red);color:var(--white);transform:rotate(-4deg);pointer-events:none}
.cs-views b{font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,88px);line-height:.86}
.cs-views small{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cs-media figcaption{margin-top:14px;font-size:15px;color:var(--muted)}
.cs-media figcaption a{color:inherit;font-weight:600}
.cs-media figcaption a:hover{color:var(--red)}
.cs-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid currentColor;margin:0}
.cs-metrics div{padding:16px 0 14px;border-bottom:1px solid var(--rule)}
.cs-metrics div:nth-child(odd){padding-right:16px}
.cs-metrics dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-metrics dd{margin:6px 0 0;font-family:var(--display);font-size:clamp(28px,2.8vw,48px);line-height:.92;font-variant-numeric:tabular-nums}
.cs-metrics .hl dd{color:var(--red);font-size:clamp(34px,3.6vw,62px)}
.cs-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(48px,7vh,88px);padding-top:clamp(24px,3vh,36px);border-top:2px solid currentColor}
.cs-body h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:.95;margin-bottom:14px}
.cs-body p{font-size:18px;line-height:1.55;color:var(--body)}

/* ---------- Closing ---------- */
.cx-cta{background:var(--ink);color:var(--white);padding:clamp(110px,16vh,190px) var(--gutter) clamp(80px,12vh,140px);border-top:2px solid #2A2A2A}
.cx-cta-title{font-size:clamp(60px,11vw,190px);line-height:.8}
.cx-cta-title .line{display:block}
.cx-cta > p{max-width:520px;margin-top:28px;font-size:19px;color:var(--grey)}
.cx-cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn-solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-solid:hover{color:var(--white)}
.cx-note{max-width:760px!important;margin-top:clamp(64px,10vh,110px)!important;font-size:14px!important;line-height:1.5;color:#7C7A75!important}

/* ---------- Small screens ---------- */
@media (max-width:1000px){
  .cs-grid{grid-template-columns:1fr}
  .cs-metrics{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
  .cs-body{grid-template-columns:1fr}
}
@media (max-width:820px){
  .cx-hero{padding-top:120px}
  .ix-row{grid-template-columns:30px minmax(0,1fr) auto;gap:12px}
  .ix-go{display:none}
  .ix-name{flex-direction:column;gap:2px}
  .ix-name span{font-size:14px}
  .cs-head{grid-template-columns:1fr}
  .cs-num{grid-row:auto;font-size:84px;margin-bottom:6px}
  .cs-metrics{grid-template-columns:1fr 1fr}
  .cs-views{top:-14px;left:-6px;padding:8px 12px 9px}
  .cs-views b{font-size:40px}
  .cs-views small{font-size:10px}
  .cs-body p{font-size:17px}
}

/* Without motion, everything is simply shown */
.no-motion .cs-frame{clip-path:none!important}