/* ============================================================
   SRK Advisors — Case Studies (scoped under #case-studies)
   Light/beige showcase, presented as a two-slide carousel.
   Reuses site :root tokens and .section.light.alt.
   ============================================================ */

#case-studies .cs-carousel{ position:relative; margin-top:4px; }

#case-studies .cs-viewport{
  overflow:hidden;
  transition:height .55s var(--ease);
}
#case-studies .cs-track{
  display:flex; align-items:flex-start;
  transition:transform .55s var(--ease);
  will-change:transform;
}
/* Full-width band: kicker + headline, then the wide diagram as the hero,
   then body + metrics below it. Single stacked column at all widths. */
#case-studies .cs-item{
  flex:0 0 100%; min-width:0;
  display:flex; flex-direction:column; align-items:stretch;
  padding:6px 2px 2px;
}
#case-studies .cs-eyebrow{ order:1; min-width:0; }
#case-studies .cs-title{   order:2; min-width:0; max-width:40ch; }
#case-studies .cs-arch{    order:3; min-width:0; width:70%; align-self:flex-start; }
#case-studies .cs-body{    order:4; min-width:0; }
#case-studies .cs-metrics{ order:5; min-width:0; }

#case-studies .cs-eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:15px;
}
#case-studies .cs-eyebrow .cs-diamond{
  flex:0 0 auto; width:7px; height:7px;
  transform:rotate(45deg); background:var(--gold);
}

#case-studies .cs-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.12; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 18px; max-width:24ch;
}

#case-studies .cs-body{ max-width:70%; }
#case-studies .cs-body p{
  font-size:clamp(.98rem,1.3vw,1.06rem); line-height:1.72;
  color:var(--soft); margin:0 0 16px;
}
#case-studies .cs-body p:last-child{ margin-bottom:0; }
#case-studies .cs-body strong{ color:var(--ink); font-weight:700; }

#case-studies .cs-metrics{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,56px);
  margin-top:28px; padding-top:26px;
  border-top:1px solid var(--hair-gold);
}
#case-studies .cs-metric{ position:relative; }
#case-studies .cs-val{
  display:block; white-space:nowrap;
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1; color:var(--gold-deep);
}
#case-studies .cs-lab{
  display:block; margin-top:10px; max-width:20ch;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}

/* controls */
#case-studies .cs-controls{
  display:flex; align-items:center; gap:18px; margin-top:34px;
}
#case-studies .cs-arrow{
  width:44px; height:44px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hair-gold); border-radius:50%;
  background:transparent; color:var(--gold-deep);
  font-family:var(--serif); font-size:22px; line-height:0; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
#case-studies .cs-arrow:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
#case-studies .cs-arrow:disabled{ opacity:.3; cursor:default; }
#case-studies .cs-arrow:disabled:hover{ background:transparent; color:var(--gold-deep); border-color:var(--hair-gold); }

#case-studies .cs-dots{ display:flex; align-items:center; gap:11px; }
#case-studies .cs-dot{
  width:9px; height:9px; padding:0; border:none; border-radius:50%;
  background:var(--hair-gold); cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
#case-studies .cs-dot.is-active{ background:var(--gold-deep); transform:scale(1.2); }

@media (max-width:620px){
  #case-studies .cs-metrics{ gap:18px; }
  #case-studies .cs-metric{ flex:1 1 100%; display:flex; align-items:baseline; gap:16px; }
  #case-studies .cs-val{ font-size:1.8rem; min-width:104px; }
  #case-studies .cs-lab{ margin-top:0; max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  #case-studies .cs-track,
  #case-studies .cs-viewport{ transition:none; }
}

/* ============================================================
   CS1 architecture panel - dark forest+gold plate (the hero's hand)
   set into the beige Case Studies section. Scoped under #case-studies.
   ============================================================ */
#case-studies .cs-arch{
  position:relative; isolation:isolate; overflow:hidden;
  margin:10px 0 30px;
  border:1px solid rgba(201,162,75,.22); border-radius:14px;
  padding:clamp(10px,1.4vw,16px) clamp(14px,1.8vw,22px) clamp(12px,1.6vw,16px);
  background:radial-gradient(118% 92% at 26% 8%, #16301f 0%, var(--forest) 50%, #0a1811 100%);
  box-shadow:0 30px 60px -38px rgba(8,19,13,.78), inset 0 1px 0 rgba(246,242,232,.03);
}
#case-studies .cs-arch-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#case-studies .cs-arch::before{
  content:""; position:absolute; inset:11px; z-index:2; pointer-events:none;
  border:1px solid rgba(201,162,75,.16); border-radius:8px;
}
#case-studies .cs-arch::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(201,162,75,0), var(--gold-deep) 18%, var(--gold-soft) 50%, var(--gold-deep) 82%, rgba(201,162,75,0));
}
#case-studies .cs-arch-svg{ position:relative; z-index:1; display:block; width:100%; height:auto; }

#case-studies .cs-arch .agrid line{ stroke:#f6f2e8; stroke-opacity:.05; stroke-width:1; }
#case-studies .cs-arch .avert{ stroke:#c9a24b; stroke-opacity:.06; stroke-width:1; }
#case-studies .cs-arch .abase{ stroke:#d8b86b; stroke-opacity:.30; stroke-width:1.1; }

#case-studies .cs-arch .amesh{ fill:none; stroke:#c9a24b; stroke-opacity:.18; stroke-width:1.1; }
#case-studies .cs-arch .aactive{ fill:none; stroke:url(#csaArc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

#case-studies .cs-arch .anode{ fill:var(--forest); stroke:#c9a24b; stroke-width:1.8; }
#case-studies .cs-arch .anode-lg{ fill:var(--forest); stroke:#c9a24b; stroke-width:1.9; }
#case-studies .cs-arch .aring-soft{ fill:none; stroke:#c9a24b; stroke-opacity:.34; stroke-width:1.2; }

#case-studies .cs-arch .aring-track{ fill:none; stroke:#f6f2e8; stroke-opacity:.09; stroke-width:6; }
#case-studies .cs-arch .aring-prog{ fill:none; stroke:url(#csaArc); stroke-width:6; stroke-linecap:round; }
#case-studies .cs-arch .aring-inner{ fill:none; stroke:#c9a24b; stroke-opacity:.22; stroke-width:1; }
#case-studies .cs-arch .adia{ fill:#d8b86b; }

#case-studies .cs-arch .aout-glow{ fill:#d8b86b; opacity:.18; }
#case-studies .cs-arch .aout-node{ fill:#f6f2e8; stroke:#c9a24b; stroke-width:1.9; }

#case-studies .cs-arch .ahdr{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.16em; fill:#d8b86b; fill-opacity:.62; }
#case-studies .cs-arch .alab{ font-family:var(--sans); font-size:17px; font-weight:500; fill:#f6f2e8; fill-opacity:.78; }
#case-studies .cs-arch .asub{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.03em; fill:#f6f2e8; fill-opacity:.5; }
#case-studies .cs-arch .amem{ font-family:var(--serif); font-style:italic; font-size:23px; fill:#d8b86b; }
#case-studies .cs-arch .amem-sub{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.2em; fill:#f6f2e8; fill-opacity:.5; }
#case-studies .cs-arch .acap{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.3em; fill:#d8b86b; fill-opacity:.6; }
#case-studies .cs-arch .aglint{ fill:#fff8e8; }
#case-studies .cs-arch .aval{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em; fill:#d8b86b; }

/* mobile diagram variants: hidden on desktop */
#case-studies .cs-arch-svg--m{ display:none; }

@media (max-width:880px){
  /* full-width plate + body on tablets */
  #case-studies .cs-arch{ width:100%; align-self:stretch; }
  #case-studies .cs-body{ max-width:none; }
}
@media (max-width:620px){
  /* swap the landscape diagram for a purpose-built vertical variant */
  #case-studies .cs-arch-svg--d{ display:none; }
  #case-studies .cs-arch-svg--m{ display:block; width:100%; }
  #case-studies .cs-arch-svg--m .ahdr{ font-size:11.5px; letter-spacing:.2em; }
  #case-studies .cs-arch-svg--m .alab{ font-size:12.5px; }
  #case-studies .cs-arch-svg--m .asub{ font-size:10.5px; }
  #case-studies .cs-arch-svg--m .amem{ font-size:19px; }
  #case-studies .cs-arch-svg--m .amem-sub{ font-size:8.5px; }
  #case-studies .cs-arch-svg--m .acap{ font-size:9.5px; letter-spacing:.24em; }
  #case-studies .cs-arch-svg--m .aval{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  #case-studies .cs-arch .aglint{ display:none; }
}