/* Technology page: sticky hero under an ink overlay, tool cards, lab block, tool sheet */
.technology-page { background: var(--ink); }
.sticky-wrap { position: relative; }
.sticky-slot { height: 100vh; position: sticky; top: 0; }
.sticky-slot .overlay { background: var(--ink); height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100%; }
.t-hero { align-items: center; background: var(--porcelain); display: flex; flex-direction: column; height: 100vh; justify-content: space-between; overflow: hidden; padding: 1.5rem 2rem 3rem; position: relative; }
.t-hero .bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.t-hero .bg img { object-position: 70% 30%; }
.t-hero .description { color: var(--slate); position: relative; text-align: center; width: 15rem; z-index: 1; margin-top: .5rem; }
.t-hero .title { color: var(--porcelain); display: flex; font: 400 11.4rem/.9 var(--serif); justify-content: space-between; letter-spacing: -.05em; mix-blend-mode: difference; position: relative; width: 100%; white-space: nowrap; }
.t-hero .title span { display: inline-block; }
.tools { padding: 22.875rem 2rem 6.5rem; position: relative; overflow: hidden; }
.tools .decor-el { height: 92.5rem; position: absolute; right: -49.875rem; top: -8rem; transform: rotate(-138deg); width: 100.875rem; max-width: none; opacity: .5; }
.tools .content { position: relative; z-index: 1; }
.tools .description { color: var(--porcelain); margin: 0 0 5rem 44rem; width: 17rem; }
.cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.tool { background: rgba(60, 65, 63, .4); border-radius: 1.875rem; cursor: pointer; display: flex; flex-direction: column; height: 25.75rem; justify-content: space-between; padding: .5rem; transition: background .35s var(--ease); --link-color: var(--porcelain); }
.tool .img-wrap { border-radius: 1.375rem; height: 11.25rem; overflow: hidden; position: relative; width: 100%; background: #000; }
.tool .img-wrap img { object-fit: contain; transition: transform .6s var(--ease); }
.tool .name { color: var(--porcelain); padding-top: 1.5rem; text-align: center; }
.tool .bottom { align-items: flex-end; display: flex; justify-content: space-between; margin-top: auto; padding: 0 1rem 1rem; }
.tool .category { color: var(--porcelain-60); width: 6.75rem; }
@media (hover: hover) { .tool:hover { background: rgba(60, 65, 63, .65); } .tool:hover .img-wrap img { transform: scale(1.06); } }

.laboratory { color: var(--porcelain); height: 73.375rem; padding: 9.625rem 2rem 8.375rem; position: relative; overflow: hidden; }
.laboratory::before, .laboratory::after { content: ""; left: 0; position: absolute; width: 100%; z-index: 1; }
.laboratory::before { background: linear-gradient(0deg, rgba(17, 24, 22, 0), #111816); height: 44.25rem; top: 0; }
.laboratory::after { background: var(--fade-ink); bottom: 0; height: 32rem; }
.laboratory .bg-img { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.laboratory .bg-img::before { background: #111816; border-radius: 7rem; content: ""; filter: blur(1.375rem); height: 78.5rem; left: -34.25rem; position: absolute; top: -9.875rem; transform: rotate(11.5deg); width: 47.375rem; z-index: 1; }
.laboratory .content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; position: relative; z-index: 2; }
.laboratory .top { display: flex; gap: 30.25rem; }
.laboratory .quote { color: rgba(236, 233, 227, .2); width: 12.875rem; }
.laboratory .title { color: var(--porcelain); }
.laboratory .title p { margin-top: 1.5rem; }
.laboratory .bottom { align-items: flex-start; display: flex; flex-direction: column; gap: 4rem; margin-left: 43.125rem; }
.laboratory .description { width: 18.125rem; }
.navy-plash { background: var(--ink); height: 14rem; position: relative; width: 100%; }

.tool-modal { height: 100vh; isolation: isolate; left: 0; overflow: hidden; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 13; }
.tool-modal::before { background: var(--ink); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity .5s var(--ease-menu); }
.tool-modal.active { visibility: visible; }
.tool-modal.active::before { opacity: .7; }
.tool-modal .preview-page { background: var(--porcelain); border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; color: var(--slate); height: 100%; left: 0; overflow: auto; position: absolute; top: 0; transform: translate(0, 101%) scale(.9); transform-origin: center bottom; width: 100%; }
.pv-top { align-items: center; display: flex; justify-content: space-between; padding: .75rem 2rem; position: sticky; top: 0; z-index: 2; background: var(--porcelain); }
.tm-hero { display: flex; height: calc(100vh - 4.5rem); justify-content: space-between; padding: 3rem 2rem 2rem; }
.tm-hero .left { align-items: flex-start; display: flex; flex-direction: column; justify-content: space-between; }
.tm-hero .title { width: 38.625rem; }
.tm-hero .description { width: 15.875rem; }
.tm-hero .img-wrap { background: #000; border-radius: 1.875rem; height: 100%; overflow: hidden; width: 43rem; }
.tm-hero .img-wrap img { object-fit: contain; }

@media (max-width: 1023px) {
  .sticky-slot { position: relative; height: auto; }
  .sticky-slot .overlay { display: none; }
  .t-hero { height: 100svh; justify-content: flex-end; padding: 0 0 2rem; }
  .t-hero::after { background: var(--ink); bottom: 0; content: ""; height: 7.875rem; left: 0; position: absolute; width: 100%; }
  .t-hero .bg::after { background: var(--fade-ink); bottom: 7.8rem; content: ""; height: 17rem; left: 0; position: absolute; width: 100%; }
  .t-hero .bg img { object-position: 78% 30%; }
  .t-hero .description { color: var(--porcelain-60); margin-bottom: 1.5rem; text-wrap: balance; width: 11rem; z-index: 2; }
  .t-hero .title { align-items: center; flex-direction: column; font-size: 3.5rem; mix-blend-mode: normal; z-index: 1; }
  .tools { padding: 3rem 1rem; }
  .tools .description { margin: 0 0 5rem; text-align: center; width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .tool .bottom { flex-direction: column; align-items: center; gap: 1rem; padding-bottom: 1rem; }
  .tool .category { text-align: center; width: 100%; }
  .laboratory { height: 48rem; padding: 3.5rem 0; }
  .laboratory .top { display: block; text-align: center; }
  .laboratory .quote { display: none; }
  .laboratory .bottom { align-items: center; gap: 3rem; margin-left: 0; }
  .laboratory .description { text-align: center; width: 20.375rem; }
  .navy-plash { height: 2rem; }
  .tm-hero { flex-direction: column; height: auto; gap: 2rem; padding: 2rem 1rem; }
  .tm-hero .title, .tm-hero .description { width: 100%; text-align: center; }
  .tm-hero .img-wrap { aspect-ratio: 1.06; width: 100%; height: auto; }
}