/* Neoteric Analytics - case study page template
   Loaded after site.css. Shares every token defined there. */

/* ---------- hero ---------- */
.cs-hero{
  position:relative; background:var(--ink); color:var(--white); overflow:hidden;
  min-height:clamp(540px,78svh,760px); display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,7vh,84px);
}
#cs-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cs-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,11,8,.95) 0%, rgba(6,11,8,.8) 42%, rgba(6,11,8,.1) 76%, rgba(6,11,8,0) 100%),
    linear-gradient(to top, rgba(6,11,8,.9) 0%, rgba(6,11,8,0) 46%);
}
@media(max-width:860px){
  .cs-hero::after{ background:linear-gradient(to top, rgba(6,11,8,.96) 30%, rgba(6,11,8,.6) 70%, rgba(6,11,8,.25) 100%); }
}
.cs-hero-inner{ position:relative; z-index:2; width:100%; padding-top:clamp(132px,17vh,176px); }
.cs-back{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(207,224,216,.6); transition:color .3s var(--ease);
}
.cs-back:hover{ color:var(--green); }
.cs-back .arw{ transition:transform .34s var(--ease); }
.cs-back:hover .arw{ transform:translateX(-4px); }
.cs-client{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green); margin-bottom:18px;
}
.cs-hero h1{ font-size:clamp(2.1rem,4.6vw,3.75rem); letter-spacing:-.04em; max-width:17ch; }
.cs-hero .lead{ margin-top:24px; max-width:52ch; color:var(--mint); }

.cs-meta{
  position:relative; z-index:2; margin-top:clamp(40px,6vh,64px);
  border-top:1px solid var(--line-dark); padding-top:22px;
  display:grid; gap:20px 40px; grid-template-columns:repeat(2,1fr);
}
@media(min-width:820px){ .cs-meta{ grid-template-columns:repeat(3,1fr); } }
.cs-meta dt{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(207,224,216,.45); margin-bottom:8px;
}
.cs-meta dd{ margin:0; font-size:.95rem; color:var(--white); line-height:1.5; }

/* ---------- challenge ---------- */
#challenge{ background:var(--white); }
.cs-split{ display:grid; gap:clamp(36px,5vw,72px); align-items:start; }
@media(min-width:960px){ .cs-split{ grid-template-columns:.85fr 1.15fr; } }
.cs-split h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); letter-spacing:-.034em; }

.pain-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-light); }
.pain-list li{
  position:relative; display:grid; gap:6px 28px; padding:26px 0;
  border-bottom:1px solid var(--line-light);
}
@media(min-width:640px){ .pain-list li{ grid-template-columns:34px 1fr; gap:0 28px; } }
.pain-list li::before{
  content:''; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.pain-list li:hover::before{ transform:scaleX(1); }
.pain-n{ font-family:var(--mono); font-size:.7rem; color:var(--grey); padding-top:4px; }
.pain-list b{ display:block; font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.02em; margin-bottom:6px; }
.pain-list p{ color:var(--grey); font-size:.97rem; line-height:1.65; max-width:54ch; }

/* ---------- solution ---------- */
#solution{ background:var(--paper); }
.sol-grid{ margin-top:clamp(44px,5vw,68px); display:grid; gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
@media(min-width:760px){ .sol-grid{ grid-template-columns:repeat(2,1fr); } }
.sol{ position:relative; background:var(--paper); padding:clamp(28px,3.4vw,42px); transition:background .4s var(--ease); }
.sol:hover{ background:var(--white); }
.sol-n{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--grey); }
.sol-bar{ width:30px; height:3px; background:var(--green); margin:18px 0 16px; transition:width .5s var(--ease); }
.sol:hover .sol-bar{ width:54px; }
.sol h3{ font-size:1.12rem; letter-spacing:-.025em; margin-bottom:10px; }
.sol p{ color:var(--grey); font-size:.96rem; line-height:1.65; }

/* ---------- impact ---------- */
#impact{ background:var(--fir-deep); color:var(--white); }
#impact::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(207,224,216,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(207,224,216,.055) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 40%, #000 0%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 40%, #000 0%, transparent 100%);
}
#impact .shell{ position:relative; z-index:1; }
.impact-grid{ margin-top:clamp(44px,5vw,68px); display:grid; gap:0; }
@media(min-width:760px){ .impact-grid{ grid-template-columns:repeat(3,1fr); } }
.impact-item{ position:relative; border-top:1px solid var(--line-dark); padding:30px 34px 32px 0; }
.impact-item::after{
  content:''; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.impact-item:hover::after{ transform:scaleX(1); }
.impact-k{ font-family:var(--display); font-size:1.6rem; font-weight:600; letter-spacing:-.035em; line-height:1.12; }
.impact-item p{ margin-top:12px; color:rgba(207,224,216,.62); font-size:.94rem; line-height:1.6; max-width:32ch; }

/* ---------- next ---------- */
#next-case{ background:var(--white); padding:clamp(64px,7vw,104px) 0; }
.next-link{
  display:grid; gap:14px 44px; align-items:center;
  border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  padding:clamp(32px,4vw,48px) 0; transition:padding-left .55s var(--ease);
}
@media(min-width:820px){
  .next-link{ grid-template-columns:180px 1fr 150px; }
  .next-link:hover{ padding-left:20px; }
}
.next-lab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); }
.next-link h3{ font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.03em; max-width:24ch; }
.next-go{ display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:500; color:var(--fir); }
@media(min-width:820px){ .next-go{ justify-content:flex-end; } }
.next-go .arw{ transition:transform .38s var(--ease); }
.next-link:hover .next-go .arw{ transform:translateX(6px); }

/* ---------- index page ---------- */
#cs-index{ background:var(--white); }
.idx-hero{ background:var(--ink); color:var(--white); padding:clamp(150px,19vh,208px) 0 clamp(64px,8vh,96px); position:relative; }
.idx-hero h1{ font-size:clamp(2.3rem,5.4vw,4.2rem); letter-spacing:-.04em; max-width:16ch; }
.idx-hero .lead{ margin-top:24px; max-width:54ch; color:var(--mint); }
.idx-list{ border-top:1px solid var(--line-light); }
.idx-item{
  position:relative; display:grid; gap:16px 44px; align-items:start;
  padding:clamp(36px,4.2vw,56px) 0; border-bottom:1px solid var(--line-light);
  transition:padding-left .55s var(--ease);
}
@media(min-width:920px){
  .idx-item{ grid-template-columns:56px 210px 1fr 150px; }
  .idx-item:hover{ padding-left:18px; }
}
.idx-item::before{
  content:''; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.idx-item:hover::before{ transform:scaleX(1); }
.idx-n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--grey); padding-top:7px; }
.idx-client{ font-family:var(--mono); font-size:.665rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fir); padding-top:7px; }
.idx-item h2{ font-size:clamp(1.3rem,2.2vw,1.72rem); letter-spacing:-.03em; max-width:24ch; }
.idx-item p{ margin-top:12px; color:var(--grey); font-size:.97rem; line-height:1.66; max-width:58ch; }

/* ============================================================
   PIPELINE — light 3D scene
   ============================================================ */
/* Follows #solution, which shares the same ground - collapse the doubled gap. */
#pipeline{ background:var(--paper); padding-top:0; }
.pipe-head{ display:grid; gap:24px 64px; align-items:end; }
@media(min-width:960px){ .pipe-head{ grid-template-columns:1.15fr .85fr; } }
.pipe-stage{
  position:relative; margin-top:clamp(40px,5vw,64px);
  height:clamp(400px,58vh,600px); background:var(--white);
  border:1px solid var(--line-light); overflow:hidden;
}
#pipe-canvas{ position:absolute; inset:0; }
.pipe-label{
  position:absolute; top:0; left:0; will-change:transform; opacity:0;
  font-family:var(--mono); font-size:.635rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fir);
  background:rgba(255,255,255,.88); border:1px solid var(--line-light);
  padding:5px 10px; white-space:nowrap; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.pipe-chips{ position:absolute; left:20px; bottom:20px; display:flex; gap:10px; pointer-events:none; }
.chip{
  background:rgba(255,255,255,.9); border:1px solid var(--line-light);
  padding:9px 15px; min-width:118px; backdrop-filter:blur(6px);
}
.chip .k{ font-family:var(--mono); font-size:.585rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); }
.chip .v{ font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--fir); font-variant-numeric:tabular-nums; margin-top:3px; }
.pipe-fallback{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  color:var(--grey); font-size:.92rem; text-align:center; padding:0 28px;
}