*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { --bg:#fff; --ink:#111; --muted:#909090; --ls:-0.03em; }
    html { scrollbar-width:none; }
    html::-webkit-scrollbar { display:none; }
    body { background:var(--bg); color:var(--ink); font-family:'Instrument Sans',sans-serif; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

    /* CLOSE BUTTON */
    .lcs-close {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 100;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.3);
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: border-color 0.3s, color 0.3s, opacity 0.2s;
    }
    .lcs-close:hover {
      opacity: 0.5;
    }
    .lcs-close-progress {
      position: absolute;
      inset: -1.5px;
      width: calc(100% + 3px);
      height: calc(100% + 3px);
      color: currentColor;
      pointer-events: none;
      transform: rotate(-90deg);
    }
    .lcs-close-progress-line {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.25;
      stroke-linecap: round;
    }
    .lcs-close-icon {
      position: relative;
      width: 24px;
      height: 24px;
      display: block;
    }
    .lcs-close-icon::before,
    .lcs-close-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 1.5px;
      background: currentColor;
      border-radius: 999px;
      transform-origin: center;
    }
    .lcs-close-icon::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .lcs-close-icon::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    .lcs-close.on-dark {
      border-color: rgba(255,255,255,0.5);
      color: rgba(255,255,255,0.9);
    }

    /* LCS PAGE */
    #lcs-page { padding-top: 0; }

    .lcs-hero-img {
      padding: 0 20px;
      padding-top: 20px;
    }

    .lcs-info-row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      padding: 40px 20px 240px;
    }

    .lcs-info-team {
      grid-column: 1 / 3;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lcs-info-role {
      grid-column: 3 / 5;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lcs-info-team span,
    .lcs-info-role span {
      font-size: 16px;
      letter-spacing: -0.01em;
      color: var(--muted);
    }

    .lcs-info-label {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .lcs-info-desc {
      grid-column: 7 / 12;
    }

    .lcs-info-text {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.4;
      color: var(--ink);
      margin-bottom: 60px;
    }

    /* Line reveal text animation. Add data-line-reveal to opt in. */
    [data-line-reveal] {
      visibility: hidden;
    }

    [data-line-reveal].is-line-reveal-ready {
      visibility: visible;
    }

    .lcs-line-reveal-line {
      display: block;
      overflow: hidden;
    }

    .lcs-line-reveal-inner {
      display: inline-block;
      transform: translateY(115%);
      animation: lcs-line-reveal-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      animation-delay: var(--line-delay, 0s);
    }

    @keyframes lcs-line-reveal-in {
      to { transform: translateY(0); }
    }

    .lcs-link {
      position: relative;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      text-decoration: none;
      color: var(--muted);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      transition: opacity 0.2s;
      gap: 64px;
    }

    .lcs-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: -80px;
      bottom: 0;
      height: 1px;
      background: #808080;
    }

    .lcs-link:hover {
      opacity: 0.5;
    }

    /* CONTENT SECTIONS */
    .lcs-content { padding: 0 20px; }

    .lcs-annotation {
      padding: 0 20px;
      margin-top: 12px;
    }

    .lcs-duo-captions + .lcs-annotation {
      margin-top: 120px;
    }

    .lcs-content-duo {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      padding: 0 20px;
    }

    .lcs-content-duo img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 650 / 590;
    }

    .lcs-content-duo img:nth-child(1) {
      grid-column: 1 / 7;
    }

    .lcs-content-duo img:nth-child(2) {
      grid-column: 7 / 13;
    }


.lcs-img-full {
  width: 100%;
  display: block;
}

.lcs-body-emphasis {
  color: #111;
}

.lcs-body-spaced {
  margin-top: 1em;
}

    .lcs-duo-captions {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      padding: 12px 20px 0;
    }

    .lcs-duo-captions p {
      font-size: 16px;
      color: var(--muted);
      letter-spacing: -0.01em;
    }

    .lcs-duo-captions p:nth-child(1) {
      grid-column: 1 / 7;
    }

    .lcs-duo-captions p:nth-child(2) {
      grid-column: 7 / 13;
    }
    
    .lcs-text-row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      padding: 40px 20px;
      margin-bottom: 160px;
    }

    .lcs-caption-dot {
      grid-column: 1 / 6;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.2;
      color: var(--ink);
      text-transform: uppercase;
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .lcs-caption-dot::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      background: var(--ink);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      top: -1px;
    }
    
    .lcs-body {
      font-weight: 500;
      grid-column: 7 / 12;
      font-size: 18px;
      letter-spacing: -0.01em;
      line-height: 1.4;
      color: var(--muted);
    }

    /* QUOTE SECTION */
    .lcs-quote {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      padding: 0px 20px 200px 20px;
    }
    .lcs-quote-mark {
      grid-column: 1 / 2;
      display: block;
      width: 90px;
      height: 78px;
    }
    .lcs-quote-content {
      grid-column: 2 / 9;
    }
    .lcs-quote-text {
      font-size: 54px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.2;
      color: var(--ink);
      margin-bottom: 32px;
    }
    .lcs-quote-attr {
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--ink);
    }

    @media (min-width:769px) {
      .lcs-quote-content {
        transform: translateY(-16px);
      }
    }

    /*
    Next project link.
    Keep this commented until there are multiple public case-study pages to chain.

    .lcs-next {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      margin: 120px 20px 0;
      padding: 24px 0;
      border-bottom: 1px solid var(--ink);
      text-decoration: none;
      color: var(--ink);
      transition: opacity 0.2s;
    }
    .lcs-next:hover {
      opacity: 0.5;
    }
    .lcs-next span {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    */

    /* FOOTER */
    footer { padding:32px 20px; display:flex; justify-content:space-between; align-items:center; margin-top:64px; }
    footer p, footer a { font-size:14px; font-weight:500; letter-spacing:var(--ls); color:var(--muted); text-decoration:none; }
    footer a:hover { color:var(--ink); }
    .footer-links { display:flex; gap:24px; }

    /* RESPONSIVE */
    @media (max-width:768px) {
      .lcs-close { top: 16px; left: 16px; width: 40px; height: 40px; }
      .lcs-hero-img { padding-top: 72px; }
      .lcs-info-row { padding: 24px 20px 60px; }
      .lcs-info-team { grid-column: 1 / 4; }
      .lcs-info-role { grid-column: 4 / 7; }
      .lcs-info-desc { grid-column: 1 / -1; margin-top: 24px; }
      .lcs-caption-dot { grid-column: 1 / -1; }
      .lcs-body { grid-column: 1 / -1; }
      .lcs-content-duo,
      .lcs-duo-captions {
        grid-template-columns: 1fr;
      }
      .lcs-content-duo img,
      .lcs-duo-captions p {
        grid-column: 1 / -1;
      }
      .lcs-quote { padding: 80px 20px; }
      .lcs-quote-mark { width: 50px; height: 43px; grid-column: 1 / -1; }
      .lcs-quote-content { grid-column: 1 / -1; }
      .lcs-quote-text { font-size: 36px; }
      footer { padding:24px 20px; margin-top:40px; }
      .footer-links { gap:16px; }
    }


/* LCS intro reveal. Remove body.lcs-intro and this block to disable. */
.lcs-intro #lcs-page > *:not(.lcs-hero-img) {
  opacity: 0;
  animation: lcs-intro-content-in 0.7s ease forwards;
  animation-delay: 0.95s;
}

.lcs-intro .lcs-info-team,
.lcs-intro .lcs-info-role {
  opacity: 0;
  transform: translateY(18px);
  animation: lcs-info-meta-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.95s;
}

.lcs-intro .lcs-hero-img {
  position: relative;
  overflow: hidden;
}


.lcs-intro .lcs-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  transform: translateY(0);
  animation: lcs-intro-mask-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.95s;
  pointer-events: none;
}

.lcs-intro .lcs-hero-img img {
  transform: translateY(18px);
  animation: lcs-intro-image-in 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.95s;
}

@keyframes lcs-intro-mask-up {
  to { transform: translateY(-100%); }
}

@keyframes lcs-intro-image-in {
  to { transform: translateY(0); }
}


@keyframes lcs-intro-content-in {
  to { opacity: 1; }
}

@keyframes lcs-info-meta-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lcs-intro #lcs-page > *:not(.lcs-hero-img),
  .lcs-intro .lcs-hero-img::after,
  .lcs-intro .lcs-hero-img img,
  .lcs-intro .lcs-info-team,
  .lcs-intro .lcs-info-role {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .lcs-intro .lcs-hero-img::after {
    display: none;
  }

  [data-line-reveal] {
    visibility: visible;
  }

  .lcs-line-reveal-inner {
    animation: none;
    transform: none;
  }

}