.oisy-page {
  --oisy-ink: var(--ink);
  --oisy-muted: var(--muted);
  --oisy-deep: var(--paper);
  --oisy-panel: var(--surface);
  --oisy-line: var(--line);
}

/* Oisy follows the portfolio canvas; the product screens carry their own dark UI. */
.oisy-page #main {
  margin: 0;
  overflow: clip;
  border-radius: 0;
  background: transparent;
}

.oisy-page .case-cover.oisy-cover {
  min-height: min(940px, calc(100svh - 20px));
  margin: 0;
  padding: clamp(118px, 12vw, 184px) clamp(24px, 5vw, 82px) clamp(42px, 6vw, 82px);
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--oisy-ink);
}

.oisy-page .oisy-cover .case-cover-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  padding-bottom: clamp(6px, 4vw, 54px);
}

.oisy-page .oisy-cover .case-back,
.oisy-page .oisy-cover .case-role {
  color: var(--oisy-muted);
}

.oisy-page .oisy-cover h1 {
  max-width: 7ch;
  margin: 22px 0 20px;
  color: var(--oisy-ink);
  font-size: clamp(66px, 8vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.065em;
}

.oisy-page .oisy-cover .case-role {
  max-width: 30ch;
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.4;
}

.portfolio-case.oisy-page .oisy-cover-art {
  /* Separate screenshots sit directly on the case canvas, without a shared mat. */
  background: transparent;
  border-radius: 0;
  overflow: visible;
  position: relative;
  align-self: stretch;
  min-height: 560px;
  display: grid;
  place-items: center;
}

.oisy-cover-desktop,
.oisy-cover-mobile {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--oisy-line);
  background: transparent;
}

.oisy-cover-desktop {
  width: min(100%, 960px);
  border-radius: clamp(18px, 2.3vw, 34px);
}

.oisy-cover-mobile {
  position: absolute;
  right: 1.5%;
  bottom: 4%;
  width: clamp(150px, 23%, 252px);
  border-radius: clamp(16px, 2vw, 26px);
}

.oisy-case {
  color: var(--oisy-ink);
  background: transparent;
}

.oisy-intro,
.oisy-section {
  width: min(100% - 40px, 1480px);
  margin-inline: auto;
}

.oisy-intro {
  padding: clamp(110px, 14vw, 220px) 0 clamp(92px, 11vw, 170px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
  gap: clamp(48px, 8vw, 150px);
  align-items: end;
}

.oisy-intro h2,
.oisy-section-heading h2,
.oisy-quote {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.055em;
}

.oisy-intro h2 {
  max-width: 14ch;
  font-size: clamp(48px, 7.2vw, 112px);
  line-height: 0.96;
}

.oisy-intro p,
.oisy-section-heading p,
.oisy-caption {
  color: var(--oisy-muted);
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.55;
}

.oisy-intro-meta {
  margin: 0;
  display: grid;
  gap: 22px;
}

.oisy-intro-meta div {
  padding-top: 20px;
  border-top: 1px solid var(--oisy-line);
}

.oisy-intro-meta dt {
  margin-bottom: 7px;
  color: var(--oisy-muted);
  font-size: 14px;
  letter-spacing: 0;
}

.oisy-intro-meta dd {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.35;
}

.oisy-section {
  padding: clamp(72px, 10vw, 154px) 0;
}

.oisy-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 90px);
}

.oisy-section-heading h2 {
  max-width: 13ch;
  font-size: clamp(44px, 6vw, 90px);
  line-height: 0.98;
}

.oisy-section-heading p {
  margin: 0;
}

.oisy-stage {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.oisy-stage img,
.oisy-stage video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 1.8vw, 26px);
}

.oisy-caption {
  margin: 18px 4px 0;
  font-size: 15px;
}

.oisy-responsive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
}

.oisy-phone-stage {
  justify-self: center;
  width: min(100%, 330px);
  padding: 0;
}

.oisy-phone-stage img {
  border-radius: 22px;
}

.oisy-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.6vw, 52px);
}

.oisy-split .oisy-stage {
  min-width: 0;
}

.oisy-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
}

.oisy-module-grid figure {
  margin: 0;
}

.oisy-module-grid figure:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.oisy-mobile-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(18px, 3vw, 44px);
}

.oisy-mobile-flow .oisy-stage {
  padding: 0;
}

.oisy-mobile-flow img {
  border-radius: 20px;
}

.oisy-quote {
  width: min(100% - 40px, 1320px);
  margin: clamp(40px, 8vw, 120px) auto;
  padding-block: clamp(72px, 11vw, 168px);
  border: 0;
  color: var(--oisy-ink);
  font-size: clamp(52px, 8.5vw, 132px);
  line-height: 0.92;
  text-align: center;
}

.oisy-video-note {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  color: var(--oisy-muted);
  font-size: 15px;
}

@media (max-width: 991px) {
  .oisy-page .case-cover.oisy-cover {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 126px;
  }

  .oisy-page .oisy-cover .case-cover-copy {
    align-self: auto;
    padding-bottom: 0;
  }

  .oisy-page .oisy-cover h1 {
    max-width: none;
  }

  .oisy-cover-art {
    min-height: 460px;
  }

  .oisy-cover-desktop {
    width: 92%;
    margin-right: auto;
  }

  .oisy-cover-mobile {
    right: 0;
    width: clamp(138px, 24vw, 220px);
  }

  .oisy-intro,
  .oisy-section-heading {
    grid-template-columns: 1fr;
  }

  .oisy-intro h2,
  .oisy-section-heading h2 {
    max-width: 15ch;
  }
}

@media (max-width: 720px) {
  .oisy-page #main {
    margin: 0;
    border-radius: 0;
  }

  .oisy-page .case-cover.oisy-cover {
    margin: 0;
    padding: 104px 18px 28px;
    border-radius: 0;
  }

  .oisy-page .oisy-cover h1 {
    font-size: clamp(60px, 20vw, 88px);
  }

  .oisy-cover-art {
    min-height: 420px;
    align-items: start;
    padding-top: 22px;
  }

  .oisy-cover-desktop {
    width: 100%;
    border-radius: 16px;
  }

  .oisy-cover-mobile {
    width: min(39%, 170px);
    right: 4%;
    bottom: 0;
    border-radius: 16px;
  }

  .oisy-intro,
  .oisy-section {
    width: min(100% - 28px, 1480px);
  }

  .oisy-intro {
    padding-top: 94px;
    gap: 56px;
  }

  .oisy-responsive-grid,
  .oisy-split,
  .oisy-module-grid {
    grid-template-columns: 1fr;
  }

  .oisy-module-grid figure:nth-child(3n + 1) {
    grid-column: auto;
  }

  .oisy-mobile-flow {
    grid-template-columns: 1fr;
  }

  .oisy-mobile-flow .oisy-stage,
  .oisy-phone-stage {
    width: min(100%, 300px);
    justify-self: center;
  }

  .oisy-video-note {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oisy-page * {
    scroll-behavior: auto !important;
  }
}


/* Existing portfolio rhythm, genuine source screens, and native disclosures. */
.oisy-intro,.oisy-section{width:calc(100% - 2 * var(--gutter));max-width:1480px}
.oisy-page .oisy-cover{padding-inline:var(--gutter)!important}
.oisy-intro h2{grid-row:span 3}
.oisy-primary-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.oisy-primary-links a,.oisy-link-group a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--muted)}
.oisy-primary-links a:hover,.oisy-link-group a:hover{text-decoration-color:currentColor}
.oisy-primary-links a:focus-visible,.oisy-link-group a:focus-visible,.oisy-stage>a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.oisy-intro .oisy-live-note,.oisy-live-note{font-size:15px;line-height:1.5;color:var(--muted);max-width:48em}
.oisy-stage>a{display:block;border-radius:clamp(12px,1.8vw,26px)}
.oisy-links-section>h2,.oisy-source-gallery>h2{font-size:clamp(36px,4vw,60px);line-height:1;letter-spacing:-.05em;margin:0 0 32px}
.oisy-source-gallery summary,.oisy-route-list summary{display:list-item;width:fit-content;cursor:pointer;min-height:44px;padding:10px 0;font-size:18px;line-height:1.4}
.oisy-source-gallery summary:focus-visible,.oisy-route-list summary:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.oisy-extra-group{margin-top:48px}
.oisy-extra-group>h3,.oisy-link-group>h3{font-size:24px;line-height:1.2;letter-spacing:-.03em;margin:0 0 24px}
.oisy-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px);align-items:start}
.oisy-extra-grid .oisy-phone-stage{width:min(100%,300px)}
.oisy-link-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:32px}
.oisy-link-group{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.oisy-link-group a{gap:14px;max-width:100%;overflow-wrap:anywhere}
.oisy-links-section>.oisy-live-note{margin-top:32px}
@media(max-width:991px){.oisy-intro h2{grid-row:auto}}
@media(max-width:720px){.oisy-extra-grid,.oisy-link-groups{grid-template-columns:1fr}.oisy-primary-links{gap:4px 20px}.oisy-intro{gap:32px}.oisy-extra-group{margin-top:40px}}
.oisy-live-link{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:0;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.oisy-live-link:hover{background:rgba(255,255,255,.85)}