/* Editorial case studies — article structure inspired by technical product writing. */
.case-page{
  position:relative;
  width:min(calc(100% - 40px),600px);
  padding-top:122px;
  padding-bottom:112px;
}
.case-identity{margin-bottom:92px}
.case-back{
  display:inline-block;
  margin-bottom:52px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  text-decoration:none;
}
.case-back:hover{color:var(--text)}

/* Hero stays intentionally distinct from the article body. */
.install-section{margin-top:0!important}
.case-company{margin-bottom:24px}
.case-company img{
  display:block;
  width:40px;
  height:40px;
  object-fit:contain;
  border:0;
  border-radius:10px;
  background:transparent;
}
.doc-header h1{
  margin:0;
  max-width:16ch;
  font-size:clamp(40px,7vw,56px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:500;
  text-wrap:balance;
}
.doc-header .lede{
  margin:24px 0 0;
  max-width:100%;
  color:var(--muted);
  font-size:18px;
  line-height:1.62;
  letter-spacing:-.015em;
}
.case-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px 28px;
  margin:34px 0 0;
  padding:0;
}
.case-meta div{min-width:0}
.case-meta dt{font-size:12px;line-height:1.4;color:var(--muted)}
.case-meta dd{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--text)}

/* Article body: one level of section hierarchy, like an essay. */
.case-page article>section:not(.install-section){
  max-width:600px;
  margin-top:88px;
}
.case-page h2{
  margin:0 0 18px;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.025em;
  font-weight:600;
  color:var(--text);
  text-wrap:balance;
}
.case-page h3{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.012em;
  font-weight:600;
  color:var(--text);
}
.case-page p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:-.01em;
  text-wrap:pretty;
}
.case-page .pull{
  margin:28px 0;
  font-size:20px;
  line-height:1.55;
  letter-spacing:-.02em;
  color:var(--text);
}
.case-page a{color:inherit}

/* Wide visual breaks. The article stays narrow; the evidence can breathe. */
.case-image,
.case-carousel,
.media-slab,
.gallery-grid,
.gallery-masonry,
.image-grid{
  width:min(920px,calc(100vw - 32px));
  margin:38px 50% 0;
  transform:translateX(-50%);
}
.case-image{
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#f3f3f1;
  border-radius:14px;
  overflow:hidden;
}
.case-image.portrait{
  aspect-ratio:9/16;
  max-width:min(520px,calc(100vw - 32px));
}
.case-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  cursor:zoom-in;
}
.image-grid{display:grid;gap:12px}
.image-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.image-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.image-grid figure{margin:0}

.case-carousel{
  position:relative;
  --carousel-surface:#f3f3f1;
}
.case-carousel-viewport{
  position:relative;
  width:100%;
  margin:0;
  padding:22px;
  background:var(--carousel-surface);
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
}
.case-carousel-viewport::before,
.case-carousel-viewport::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:44px;
  pointer-events:none;
  opacity:0;
  transition:opacity 160ms ease;
}
.case-carousel-viewport::before{
  left:0;
  background:linear-gradient(90deg,var(--carousel-surface),rgba(243,243,241,0));
}
.case-carousel-viewport::after{
  right:0;
  background:linear-gradient(270deg,var(--carousel-surface),rgba(243,243,241,0));
}
.case-carousel.has-overflow-left .case-carousel-viewport::before{opacity:1}
.case-carousel.has-overflow-right .case-carousel-viewport::after{opacity:1}

.case-carousel-track{
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  gap:12px;
  width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.case-carousel-track::-webkit-scrollbar{display:none}
.case-carousel.is-contained .case-carousel-track{
  justify-content:center;
  overflow-x:hidden;
  scroll-snap-type:none;
}
.case-carousel-slide{
  flex:0 0 auto;
  width:min(var(--slide-width,320px),86vw);
  height:clamp(300px,56vh,540px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.case-carousel-slide.portrait{aspect-ratio:9/16}
.case-carousel-slide.landscape{aspect-ratio:16/9}
.case-carousel-slide img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  cursor:zoom-in;
}
.case-carousel--unified .case-carousel-viewport{padding:22px}
.case-carousel--unified .case-carousel-slide{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
}

/* Controls represent scroll states, not slide count. */
.case-carousel-controls{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.case-carousel:not(.is-scrollable) .case-carousel-controls{display:none}
.case-carousel-controls button{
  position:absolute;
  top:50%;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin:0;
  padding:0;
  border:1px solid rgba(24,24,24,.09);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  pointer-events:auto;
  opacity:0;
  transform:translateY(-50%) scale(.96);
  transition:opacity 140ms ease,transform 180ms cubic-bezier(.22,1,.36,1),background-color 140ms ease;
}
.case-carousel-prev{left:12px}
.case-carousel-next{right:12px}
.case-carousel:hover .case-carousel-controls button:not(:disabled),
.case-carousel:focus-within .case-carousel-controls button:not(:disabled){
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.case-carousel-controls button:hover:not(:disabled){background:#fff}
.case-carousel-controls button:disabled{
  opacity:0!important;
  pointer-events:none;
}
.case-carousel-count{
  position:absolute;
  right:14px;
  bottom:14px;
  min-width:38px;
  padding:4px 7px;
  border:1px solid rgba(24,24,24,.07);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:color 140ms ease,background-color 140ms ease;
}
.case-carousel:hover .case-carousel-count,
.case-carousel:focus-within .case-carousel-count{
  color:var(--text);
  background:rgba(255,255,255,.94);
}

.gallery-grid{display:grid;gap:12px}
.gallery-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-grid img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  padding:18px;
  border-radius:12px;
  background:#f3f3f1;
  cursor:zoom-in;
}
.gallery-grid img.portrait{aspect-ratio:9/16}
.media-slab{
  display:grid;
  gap:14px;
  padding:22px;
  background:#f3f3f1;
  border-radius:14px;
}
.media-slab.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.media-slab.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.media-slab figure{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(300px,56vh,540px);
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}
.media-slab img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  cursor:zoom-in;
}
.gallery-masonry{columns:2;column-gap:12px}
.gallery-masonry img{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 12px;
  break-inside:avoid;
  object-fit:contain;
  padding:18px;
  border-radius:12px;
  background:#f3f3f1;
  cursor:zoom-in;
}

/* Notes are editorial, not cards. */
.callout{
  margin:30px 0 28px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.callout::before{display:none}
.callout span{
  display:block;
  margin-bottom:5px;
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
}
.callout p{
  margin:0;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.72;
}

/* Code / data blocks. */
.case-page pre{
  width:min(760px,calc(100vw - 32px));
  margin:30px 50% 0;
  transform:translateX(-50%);
  padding:20px 22px;
  background:#f3f3f1;
  border:0;
  border-radius:12px;
  overflow:auto;
  font-size:13px;
  line-height:1.65;
}
.case-page pre code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--text);
  white-space:pre;
}
.case-page table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:14px;
}
.case-page th,.case-page td{
  padding:12px 0;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
.case-page th{font-size:12px;font-weight:500;color:var(--text)}
.case-page td{color:var(--muted)}

/* Hook sidebar — static HTML port of the requested component's behavior. */
.toc{
  --hook:#555552;
  position:fixed;
  top:132px;
  left:auto;
  right:max(28px,calc(50vw - 704px));
  z-index:20;
  width:180px;
  max-height:calc(100vh - 164px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.toc::-webkit-scrollbar{display:none}
.toc-title{
  margin:0 0 14px 2px;
  color:var(--text);
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.toc-nav{
  position:relative;
  padding-left:0;
  --active-y:16px;
}
.toc-marker{
  position:absolute;
  top:2px;
  left:2px;
  width:13px;
  height:max(0px,calc(var(--active-y) - 2px));
  border-left:1px dashed var(--hook);
  border-bottom:1px dashed var(--hook);
  border-bottom-left-radius:7px;
  pointer-events:none;
  transition:height .42s cubic-bezier(.22,1,.36,1);
}
.toc ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.toc li{margin:0}
.toc a{
  position:relative;
  display:block;
  min-height:30px;
  padding:6px 8px 6px 22px;
  border-radius:8px;
  color:color-mix(in srgb,var(--text) 48%,transparent);
  font-size:13px;
  line-height:18px;
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease;
}
.toc a:hover,
.toc a:focus-visible{
  color:color-mix(in srgb,var(--text) 78%,transparent);
  background:var(--hover);
  outline:none;
}
.toc a.is-active{
  color:var(--text);
  background:transparent;
}
.toc a.is-active::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background:var(--hook);
  transform:translate(-50%,-50%);
}
.toc-label{display:block}

/* Next case is just another editorial link. */
.next-case{
  margin-top:104px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.next-case-label{font-size:12px;color:var(--muted)}
.next-case-link{
  display:block;
  margin:14px -12px 0;
  padding:12px;
  border-radius:8px;
  text-decoration:none;
  transition:background-color 140ms ease;
}
.next-case-link:hover{background:var(--hover);color:var(--text)}
.next-case-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.next-case-copy .next-case-name{font-size:15px;line-height:1.45;font-weight:500}
.next-case-copy strong{font-size:14px;line-height:1.5;font-weight:400;color:var(--muted)}
.next-case-arrow{display:none}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:5vh;
  background:rgba(15,15,15,.82);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox-frame{
  width:min(92vw,1400px);
  height:82vh;
  display:grid;
  place-items:center;
  padding:18px;
  border-radius:12px;
  background:var(--surface);
  overflow:hidden;
}
.lightbox-frame img{display:block;width:100%;height:100%;object-fit:contain}
.lightbox-close{
  position:absolute;
  top:22px;
  right:22px;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(20,20,20,.6);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

@media(max-width:1432px){
  .toc{display:none}
}
@media(max-width:760px){
  .case-page{width:min(calc(100% - 32px),600px);padding-top:72px;padding-bottom:80px}
  .case-meta{grid-template-columns:1fr;gap:14px}
  .case-page article>section:not(.install-section){margin-top:72px}
  .case-page h2{font-size:20px}
  .case-page p,.callout p{font-size:16px}
  .image-grid.two,.image-grid.three,.gallery-grid.cols-2,.gallery-grid.cols-3,.media-slab.cols-2,.media-slab.cols-3{grid-template-columns:1fr}
  .media-slab figure{height:auto;aspect-ratio:16/9}
  .case-carousel-slide{height:clamp(260px,52vh,480px)}
  .case-carousel-controls button:not(:disabled){
    opacity:1;
    transform:translateY(-50%) scale(1);
  }
}
@media(hover:none){
  .case-carousel-controls button:not(:disabled){
    opacity:1;
    transform:translateY(-50%) scale(1);
  }
}
@media(prefers-reduced-motion:reduce){
  .toc-marker,.toc a,.lightbox,
  .case-carousel-viewport::before,.case-carousel-viewport::after,
  .case-carousel-controls button,.case-carousel-count{transition:none}
  .case-carousel-track{scroll-behavior:auto}
}