/* Horizon Navy — case studies: three results reports laid side by side on a white page.
   Used by /case-studies and the smaller version at the bottom of /work. */

:root{
  --sheet-line:#E6EAF0;
  --ink-soft:#41557C;
  --ink-mute:#5C6F92;
  --chart:#2F8DB3;
  --report-strip:linear-gradient(90deg,#3FA7D0,#7185A8 45%,#716F9A 70%,#172B52);
  --report-number:linear-gradient(105deg,#2F8DB3 0%,#716F9A 55%,#172B52 100%);
}

/* ---------- Page ---------- */
.cs-hero{padding:calc(var(--header-h) + clamp(28px,6vh,72px)) 0 clamp(36px,4.4vw,64px)}
.cs-title{
  margin:0;
  font-weight:200;font-size:clamp(44px,6.2vw,92px);line-height:1.02;letter-spacing:-.03em;
  color:var(--hn-navy);
  animation:cs-title-in 1.1s var(--ease) both;
}
@keyframes cs-title-in{from{opacity:0;transform:translateY(.12em);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.cs-desk{padding:0 0 clamp(96px,11vw,160px)}

/* ---------- The board: three papers, their rows lined up across ---------- */
.cs-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.2vw,34px);margin:0;padding:0;list-style:none}
.cs-stack{
  position:relative;isolation:isolate;
  grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0;
  opacity:0;transform:translateY(56px);
  transition:opacity .8s var(--ease) calc(var(--n) * .15s),transform 1s cubic-bezier(.2,.8,.25,1) calc(var(--n) * .15s);
}
.cs-board--compact .cs-stack{grid-row:span 4}
.cs-board.is-in .cs-stack{opacity:1;transform:none}
/* The pages underneath. */
.cs-stack::before,.cs-stack::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;
  box-shadow:0 1px 2px rgba(23,43,82,.08);
  transition:transform 1.2s cubic-bezier(.2,.8,.25,1) calc(.35s + var(--n) * .15s);
}
.cs-stack::before{background:#E3E8F0}
.cs-stack::after{background:#F0F3F7}
.cs-stack:nth-child(1){--r1:-2.2deg;--r2:-1deg}
.cs-stack:nth-child(2){--r1:1.8deg;--r2:.8deg}
.cs-stack:nth-child(3){--r1:-1.4deg;--r2:1.2deg}
.cs-board.is-in .cs-stack::before{transform:translate(6px,10px) rotate(var(--r1))}
.cs-board.is-in .cs-stack::after{transform:translate(2px,5px) rotate(var(--r2))}

.cs-sheet{
  position:relative;overflow:hidden;
  grid-row:1 / -1;display:grid;grid-template-rows:subgrid;row-gap:0;
  padding:0 clamp(20px,2.1vw,32px);
  border-radius:6px;
  background:#FFFFFF;color:var(--hn-navy);text-decoration:none;
  box-shadow:0 0 0 1px rgba(23,43,82,.07),0 36px 70px -34px rgba(23,43,82,.45);
}
.cs-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--report-strip)}
@supports not (grid-template-rows:subgrid){
  .cs-stack{display:block}
  .cs-sheet{display:flex;flex-direction:column;height:100%}
}

.cs-sheet__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:28px 0 16px;border-bottom:1px solid var(--sheet-line)}
.cs-sheet__stage{font:600 10.5px/1 var(--font);letter-spacing:.26em;text-transform:uppercase;color:#2F8DB3;white-space:nowrap}
.cs-tag{padding:5px 9px;border-radius:20px;background:rgba(113,111,154,.12);font:600 9.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#56547E;white-space:nowrap}
.cs-sheet__name{margin:24px 0 0;font-weight:200;font-size:clamp(30px,2.6vw,40px);line-height:1.04;letter-spacing:-.03em;color:var(--hn-navy);text-wrap:balance}
.cs-sheet__problem{margin:14px 0 0;font-weight:300;font-size:clamp(17px,1.3vw,19px);line-height:1.4;color:var(--ink-soft);text-wrap:pretty}
.cs-sheet__meta{display:flex;flex-wrap:wrap;gap:4px 0;margin:16px 0 0;padding-bottom:22px;border-bottom:1px solid var(--sheet-line);font-size:13px;line-height:1.45;color:var(--ink-mute)}
.cs-sheet__meta span + span:not(.cs-sheet__channels)::before{content:"·";margin:0 8px;color:#B4BFD0}
.cs-sheet__channels{flex-basis:100%}
.cs-sheet__hero{display:grid;align-content:start;gap:10px;padding-top:24px}
.cs-sheet__label{display:block;font:600 10.5px/1.3 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.cs-sheet__big{
  display:block;
  font-weight:200;font-size:clamp(56px,5.6vw,94px);line-height:.95;letter-spacing:-.045em;
  background:var(--report-number);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.04em;
}
.cs-sheet__note{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
.cs-chart{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--sheet-line)}
.cs-chart__title{margin-bottom:14px;font-weight:500;font-size:13.5px;color:var(--hn-navy)}
.cs-chart__box{position:relative;min-height:40px}
.cs-chart__box svg{display:block;overflow:visible}
.cs-sheet__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:end;gap:0 18px;margin-top:20px;padding-bottom:26px}
.cs-sheet__stats li{display:grid;gap:8px;align-content:start;padding:16px 0;border-top:1px solid var(--sheet-line)}
.cs-sheet__stat{font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1;letter-spacing:-.02em;color:var(--hn-navy)}

@media (max-width:1020px){
  .cs-board{grid-template-columns:minmax(0,1fr);gap:52px;max-width:560px}
  .cs-stack,.cs-board--compact .cs-stack{grid-row:auto;display:block}
  .cs-sheet{display:flex;flex-direction:column}
}

/* ---------- Charts ---------- */
.cs-grid{stroke:var(--sheet-line);stroke-width:1}
.cs-axis{font:400 11px var(--font);fill:var(--ink-mute);font-variant-numeric:tabular-nums}
.cs-area{opacity:0;transition:opacity 1s var(--ease) 1.4s}
.is-in .cs-area{opacity:.1}
.cs-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,.05,.3,1) .5s}
.is-in .cs-line{stroke-dashoffset:0}
.cs-end,.cs-endlabel{opacity:0;transition:opacity .4s var(--ease) 2.1s}
.is-in .cs-end,.is-in .cs-endlabel{opacity:1}
.cs-end,.cs-hover{stroke:#FFFFFF;stroke-width:2}
.cs-endlabel{font:500 12px var(--font);fill:var(--hn-navy)}
.cs-cross{stroke:#C3CDDC;stroke-width:1}
.cs-hit{fill:transparent;cursor:crosshair}

.cs-funnel{display:grid}
.cs-funnel__row{display:grid;grid-template-columns:minmax(86px,108px) minmax(0,1fr);align-items:center;gap:12px;padding:5px 0}
.cs-funnel__label{font-size:13.5px;line-height:1.3;color:var(--ink-soft)}
.cs-funnel__track{display:flex;align-items:center;gap:8px;min-width:0}
.cs-funnel__bar{
  flex:none;display:block;height:24px;
  width:calc((100% - 52px) * var(--p));min-width:4px;
  border-radius:0 4px 4px 0;background:var(--chart);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) calc(.5s + var(--n) * .3s),filter .2s;
}
.is-in .cs-funnel__bar{transform:none}
.cs-funnel__row:hover .cs-funnel__bar{filter:brightness(1.12)}
.cs-funnel__val{font-weight:500;font-size:13.5px;color:var(--hn-navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-funnel__conv{display:flex;gap:8px;align-items:center;margin-left:120px;padding:2px 0;font-size:12px;color:var(--ink-mute)}
.cs-funnel__conv span{color:var(--chart)}
.cs-funnel--mini .cs-funnel__row{grid-template-columns:1fr;padding:3px 0}
.cs-funnel--mini .cs-funnel__bar{height:12px;width:calc(100% * var(--p))}

.cs-gauge{position:relative;width:max-content;margin:6px auto 0}
.cs-gauge svg{display:block;overflow:visible}
.cs-gauge__track,.cs-gauge__value{fill:none;stroke-linecap:round}
.cs-gauge__track{stroke:#E6EBF2}
.cs-gauge__value{stroke-dasharray:0 100;transition:stroke-dasharray 1.8s cubic-bezier(.6,.05,.3,1) .5s}
.is-in .cs-gauge__value{stroke-dasharray:var(--p) 100}
.cs-gauge__knob{transform:rotate(0deg);transition:transform 1.8s cubic-bezier(.6,.05,.3,1) .5s;pointer-events:none}
.is-in .cs-gauge__knob{transform:rotate(var(--a))}
.cs-gauge__knob circle{fill:#FFFFFF;stroke:#716F9A;filter:drop-shadow(0 2px 4px rgba(23,43,82,.25))}
.cs-gauge__center{position:absolute;left:0;right:0;transform:translateY(-50%);display:grid;justify-items:center;gap:4px;text-align:center;pointer-events:none}
.cs-gauge__num{font-weight:200;font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--hn-navy)}
.cs-gauge__of{font-size:15px;line-height:1.2;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.cs-gauge__label{margin-top:6px;font-size:13px;line-height:1.2;color:var(--ink-soft)}
.cs-gauge--mini{margin:0}
.cs-gauge--mini .cs-gauge__num{font-size:18px;font-weight:300}

/* Tooltip */
.cs-tip{
  position:fixed;z-index:90;pointer-events:none;
  padding:8px 12px;border-radius:8px;
  background:var(--hn-navy-deep);color:var(--hn-gray-cool);
  font:400 13px/1.3 var(--font);white-space:nowrap;
  box-shadow:0 10px 30px -8px rgba(4,10,24,.4);
}
.cs-tip b{font-weight:500;color:#FFFFFF;margin-right:4px}

/* ---------- The smaller version on /work ---------- */
.w-reports{padding:clamp(64px,8vw,120px) 0 clamp(96px,11vw,150px);border-top:1px solid var(--hairline-light)}
.w-reports__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(36px,4.4vw,60px)}
.w-reports__title{margin:0;font-weight:200;font-size:clamp(44px,6vw,88px);line-height:.95;letter-spacing:-.045em;color:var(--hn-navy)}
.w-reports__all{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(23,43,82,.22);font:500 15px/1 var(--font);letter-spacing:.04em;color:var(--hn-navy);text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.w-reports__all:hover{background:var(--hn-navy);color:#FFFFFF;box-shadow:none}
.w-reports__all span{transition:transform .25s var(--ease)}
.w-reports__all:hover span{transform:translateX(4px)}
.cs-sheet--compact{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cs-sheet--compact:hover,.cs-sheet--compact:focus-visible{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(63,167,208,.35),0 44px 80px -34px rgba(23,43,82,.55)}
.cs-sheet--compact .cs-sheet__name{font-size:clamp(24px,2vw,30px)}
.cs-sheet--compact .cs-sheet__big{font-size:clamp(48px,4.6vw,76px)}
.cs-sheet__mini{display:block;margin-top:22px;padding-bottom:28px;min-height:64px}

@media (prefers-reduced-motion:reduce){
  .cs-title{animation:none}
  .cs-stack{opacity:1;transform:none}
}