/* Shared case-study system: Kyma is the canonical visual template. */
body.case-page{
  --case-dark:#0d0d0d;
  --case-light:#e5e5e5;
  --case-ink:#141412;
  --case-muted:#62625e;
  --case-radius:8px;
  --case-radius-small:6px;
  --case-rail:min(1280px,100%);
}

body.case-page .case-rail{
  width:var(--case-rail);
  margin-inline:auto;
  padding-inline:clamp(24px,4vw,48px);
}

/* The site chrome is one component on every route. These values mirror the
   homepage exactly so entering a case study never changes its visual scale. */
body.case-page .nav{
  padding:clamp(22px,2vw,32px) 48px;
}

body.case-page .nav .brand{
  width:184px;
  height:36px;
}

body.case-page .home-foot{
  max-width:1824px;
  margin:0 auto;
  padding:clamp(64px,6vw,96px) 48px 40px;
  border-top:0;
}

body.case-page .home-foot-links{
  gap:clamp(48px,7vw,112px);
  max-width:1240px;
}

body.case-page .home-foot-link{
  padding:var(--s4) 0;
  border:0;
  border-radius:0;
}

body.case-page .home-foot-label{font-size:11px}
body.case-page .home-foot-value{font-size:clamp(1.125rem,1.4vw,1.375rem)}
body.case-page .home-foot-meta{font-size:.75rem}

body.case-page .cs-hero{
  min-height:auto;
  padding-block:clamp(118px,12vw,164px) clamp(56px,7vw,88px);
  background:var(--case-dark);
  color:#f1efe8;
}

body.case-page .cs-hero h1{
  max-width:20ch;
  margin:0;
  font-size:clamp(2.125rem,3.55vw,3.25rem);
  line-height:1.08;
  letter-spacing:-.042em;
  text-wrap:balance;
}

body.case-page .cs-lede,
body.case-page .case-section-head p{
  font-size:1rem;
  line-height:1.62;
}

body.case-page .case-body,
body.case-page .band-light,
body.case-page .case-section{
  background:var(--case-light);
  color:var(--case-ink);
}

body.case-page .case-section{
  padding-block:clamp(68px,7vw,96px);
  border:0;
}

body.case-page .case-body > .case-section + .case-section,
body.case-page .case-section + .case-section{
  border-top:0;
}

body.case-page .case-section-head{
  gap:clamp(28px,5vw,72px);
  margin-bottom:clamp(40px,5vw,64px);
}

body.case-page .case-section-head h2{
  max-width:20ch;
  margin:0;
  font-size:clamp(1.75rem,2.4vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.04em;
  text-wrap:balance;
}

body.case-page .case-section-head p{
  max-width:52ch;
  margin:0;
  color:rgba(20,20,18,.68);
}

/* A single, quiet dark interlude gives the client voice its own beat between
   the website presentation and the motion work without introducing a new card
   language. */
body.case-page .case-testimonial-section{
  padding-block:clamp(72px,8vw,112px);
  background:var(--case-dark);
  color:#f1efe8;
}

body.case-page .case-testimonial-section .case-section-index{
  color:rgba(241,239,232,.48);
}

body.case-page .case-testimonial-section .case-section-head h2{
  color:#f1efe8;
}

body.case-page .case-testimonial-section .case-section-head p{
  color:rgba(241,239,232,.62);
}

body.case-page .case-testimonial-media{
  width:min(100%,1080px);
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--case-radius);
  background:#050505;
  box-shadow:0 24px 72px rgba(0,0,0,.28);
}

body.case-page .case-testimonial-media video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#050505;
}

body.case-page .case-media,
body.case-page .case-shot{
  overflow:hidden;
  border-radius:var(--case-radius);
}

body.case-page .case-media img,
body.case-page .case-media video,
body.case-page .case-shot img,
body.case-page .case-shot video{
  display:block;
  width:100%;
  height:auto;
}

/* The previous Volta presentation stays out of the rendered and accessibility
   trees while the new, asset-led case study uses the shared Kyma system. */
body.case-page .legacy-volta-case{display:none!important}
body.case-page .new-volta-case .case-body{padding:0}
body.case-page .new-volta-case .case-section + .case-section{margin-top:0}
body.case-page .new-volta-case .case-hero-media video{aspect-ratio:auto;object-fit:contain}

/* A single editorial handoff is clearer than a carousel when there are only
   two published case studies. The whole surface is the link. */
body.case-page .case-next-project{
  padding-block:clamp(72px,8vw,112px);
  background:var(--case-light);
}
body.case-page .case-next-link{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  min-height:clamp(320px,34vw,470px);
  overflow:hidden;
  border-radius:var(--case-radius);
  background:var(--case-dark);
  color:#f1efe8;
  text-decoration:none;
}
body.case-page .case-next-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(28px,4vw,56px);
}
body.case-page .case-next-copy span{
  margin-bottom:auto;
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(241,239,232,.5);
}
body.case-page .case-next-copy h2{
  margin:0 0 12px;
  font-size:clamp(2rem,3vw,3rem);
  line-height:1;
  letter-spacing:-.045em;
}
body.case-page .case-next-copy p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(241,239,232,.62);
}
body.case-page .case-next-media{min-height:100%;overflow:hidden}
body.case-page .case-next-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease;
}
body.case-page .case-next-link:hover .case-next-media img{transform:scale(1.025);filter:brightness(1.05)}
body.case-page .case-next-link:focus-visible{outline:2px solid var(--case-dark);outline-offset:5px}

body.case-page .case-section-index,
body.case-page .cs-eyebrow,
body.case-page .cs-kind,
body.case-page .cs-meta dt{
  letter-spacing:.14em;
}

body.case-page .cs-meta{
  border-top:0;
  padding-top:0;
}

body.case-page .cs-meta > div:first-child{
  padding-top:0;
  border-top:0;
}

body.case-page .cs-meta h4{font-size:10px}
body.case-page .cs-meta p{font-size:14px;line-height:1.55}

/* SplitType creates one element per rendered line. Keeping the line itself
   block-level makes the stagger read cleanly without changing text wrapping. */
body.case-page .case-split-line{
  display:block;
  transform-origin:left bottom;
  will-change:transform,opacity;
}

/* Shared About off-canvas. */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:240;display:flex;justify-content:flex-end}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(4,4,4,.72);backdrop-filter:blur(6px);opacity:0}
.modal-panel{position:relative;width:min(680px,100%);height:100%;display:flex;flex-direction:column;background:#0d0d0d;color:#f1efe8;border-left:1px solid rgba(241,239,232,.1)}
.modal-bar{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(24px,4vw,48px);border-bottom:1px solid rgba(241,239,232,.1);flex:0 0 auto}
.modal-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a86}
.modal-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;color:#8a8a86;cursor:pointer;transition:color .25s ease,background .25s ease}
.modal-close:hover{color:#f1efe8;background:rgba(241,239,232,.07)}
.modal-close:focus-visible{outline:2px solid #f1efe8;outline-offset:2px}
.modal-close svg{width:18px;height:18px}
.mc-esc{font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;border-radius:4px;padding:2px 5px;opacity:.75}
.modal-body{padding:clamp(32px,5vw,64px);overflow-y:auto;flex:1 1 auto}
.about-grid{display:grid;gap:48px;align-items:start}
.about-lede p{max-width:52ch;margin:0 0 20px;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.65;color:#f1efe8}
.about-lede p:last-child{margin-bottom:0;color:#8a8a86}
.about-meta{display:flex;flex-wrap:wrap;gap:32px 48px}
.meta-block{min-width:180px}
.meta-block h4{margin:0 0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a86}
.meta-block ul{list-style:none;margin:0;padding:0}
.meta-block li{font-size:14px;line-height:1.85;color:rgba(241,239,232,.85)}
.about-stamp{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(241,239,232,.1);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a86}

@media (max-width:760px){
  body.case-page .cs-hero{padding-block:96px 48px}
  body.case-page .cs-hero h1{font-size:clamp(1.9rem,8.3vw,2.25rem);line-height:1.08}
  body.case-page .case-section{padding-block:64px}
  body.case-page .case-section-head{margin-bottom:32px}
  body.case-page .case-section-head h2{font-size:clamp(1.65rem,7vw,1.95rem)}
  body.case-page .case-section-head p{font-size:15px;line-height:1.6}
  body.case-page .case-testimonial-section{padding-block:64px}
  body.case-page .case-testimonial-media{border-radius:var(--case-radius-small)}
  body.case-page .case-media,
  body.case-page .case-shot{border-radius:var(--case-radius-small)}
  body.case-page .case-next-project{padding-block:64px}
  body.case-page .case-next-link{
    grid-template-columns:1fr;
    min-height:0;
    border-radius:var(--case-radius-small);
  }
  body.case-page .case-next-copy{min-height:220px;padding:28px 24px}
  body.case-page .case-next-media{aspect-ratio:3/2;order:-1}
  body.case-page .case-next-copy h2{font-size:clamp(1.9rem,8vw,2.25rem)}
  .modal-panel{border-left:0}
  .modal-body{padding:32px 24px 48px}
}

@media (max-width:900px){
  body.case-page .nav{padding:var(--s4) var(--s6)}
  body.case-page .nav .brand{width:150px;height:32px}
  body.case-page .home-foot{padding:var(--s8) var(--s6) var(--s6)}
  body.case-page .home-foot-links{gap:var(--s4)}
}

@media (prefers-reduced-motion:reduce){
  .modal-panel,.modal-scrim{transition:none!important}
}