/* ============ CASE STUDY — PAGE ENHANCEMENTS (Ayntech only, for now) ============
   Loaded only by case-studies/ayntech.html, in addition to the shared css/style.css. Scoped
   under new class names (.cs-*) and the .cs-enhanced wrapper so nothing here touches the
   other 7 case-study pages sharing the same .cs2-* template. If this direction works, fold
   the relevant rules into style.css and add the same markup to the other pages — see
   js/case-enhanced.js for the matching behavior. Respects prefers-reduced-motion via the
   site's existing global media query in style.css (the *{transition:none!important} rule
   there already neutralizes the transitions added here, no separate override needed). */

/* Scroll progress bar — fixed under the nav, fills left-to-right as the page scrolls. */
.cs-progress{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.06);z-index:250;}
.cs-progress-fill{display:block;height:100%;width:0%;background:var(--orange);}

/* In-page section rail — desktop only, right edge (was left — floated alone in the empty
   left margin, disconnected from the content column; the right edge sits closer to the meta
   sidebar so it reads as part of the page instead of a stray element). Numbers stay visible;
   labels expand out to the left on hover/active so the rail reads as a quiet set of dots
   until you interact with it. */
.cs-rail{position:fixed;right:40px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:20px;}
.cs-rail a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;opacity:.4;transition:opacity .3s var(--ease);}
.cs-rail a:hover{opacity:.75;}
.cs-rail a.active{opacity:1;}
.cs-rail-num{font-family:var(--font);font-size:11px;font-weight:700;color:var(--muted-cool);transition:color .3s var(--ease);}
.cs-rail a.active .cs-rail-num{color:var(--orange);}
.cs-rail-label{font-size:12px;font-weight:500;color:var(--text);max-width:0;overflow:hidden;white-space:nowrap;opacity:0;text-align:right;transition:max-width .35s var(--ease), opacity .35s var(--ease);}
.cs-rail a:hover .cs-rail-label,
.cs-rail a.active .cs-rail-label{max-width:110px;opacity:1;}
@media (max-width:1300px){
  .cs-rail{display:none;}
}

/* Richer entrance for this page's own content only (translateY + a subtle scale, instead of
   the site-wide .reveal's plain translateY) — the "More projects" and footer sections below
   .cs-enhanced keep the default global .reveal look, same as every other page. */
.cs-enhanced .reveal{transform:translateY(36px) scale(.97);}
.cs-enhanced .reveal.in-view{transform:translateY(0) scale(1);}

/* Pull-quote — a bold, orange-accented mid-page break pulled from the case study's own
   Outcome copy (not new/invented content), placed right before the gallery as a beat before
   the visuals. */
.cs-pullquote{margin:8px 0 72px;padding:6px 0 6px 28px;border-left:3px solid var(--orange);}
.cs-pullquote p{font-family:var(--font);font-weight:600;font-size:clamp(22px,3vw,32px);line-height:1.42;letter-spacing:-.01em;color:var(--text);}

/* Project gallery — one big, full-width visual per item, stacked, instead of three small
   tiles side by side (the earlier column layout read too cramped for a quick recruiter
   scan). Each panel gets a single small uppercase label in the corner and a large visual
   area — the label is the only chrome, everything else is the image itself, so a real
   screenshot dropped in later reads clean and full-size with zero markup changes. */
.cs2-gallery-stack{display:flex;flex-direction:column;gap:24px;margin-top:8px;}
.cs2-gallery-panel{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#141414,#0a0a0a);transition:border-color .35s var(--ease);}
.cs2-gallery-panel:hover{border-color:rgba(255,138,0,.28);}
.cs2-gallery-panel-label{position:absolute;top:24px;left:28px;z-index:2;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);}
.cs2-gallery-panel-visual{height:460px;display:flex;align-items:center;justify-content:center;}
.cs2-gallery-panel-visual svg{width:46px;height:46px;color:var(--muted-cool);opacity:.4;}
@media (max-width:760px){
  .cs2-gallery-panel-visual{height:280px;}
}

/* Header redesign — the base template caps .cs2-head at max-width:900px, narrower than the
   1728px .container that "Back to Work" and the Overview section use, and centers that
   narrower box with auto margins — two different box widths, two different left edges.
   Matching .cs2-head's own max-width/margin to .container's EXACT values (not just
   `max-width:none; margin:0`, which removes the width cap AND the centering, letting the
   box stretch edge-to-edge instead) is what actually lines it up: same box, same edges,
   just extra vertical margin for spacing below "Back to Work". .cs2-sub keeps its own
   max-width so the paragraph still wraps at a readable line length. Also ties this page to
   Ayntech's own accent color (the same cyan used for its panel glow on the homepage
   showcase, see WS_ACCENTS in js/home.js). */
.cs2-head{position:relative;text-align:left;max-width:1728px;margin:36px auto 40px;}
.cs2-head::before{content:'';position:absolute;top:-90px;left:-60px;width:440px;height:440px;background:radial-gradient(closest-side, rgba(53,176,255,.16), transparent 72%);pointer-events:none;z-index:-1;}
.cs2-head-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-bottom:22px;}
.cs2-head-tags span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#35b0ff;background:rgba(53,176,255,.1);border:1px solid rgba(53,176,255,.25);padding:6px 13px;border-radius:100px;}
.cs2-head-row{justify-content:flex-start;}
.cs2-head-icon{width:60px;height:60px;background:rgba(53,176,255,.08);border-color:rgba(53,176,255,.22);}
.cs2-head-icon img{width:28px;height:28px;}
.cs2-sub{margin-left:0;margin-right:0;}
.cs2-sub-accent{color:#7dcdff;font-weight:600;}